Header graphics aren't showing up responsive

When I view my site: http://www.personaltrainersetobicoke.com/

the header graphics aren't being responsive and the phone number text on top of the image isn't resizing either. 

How do I fix this?

1,143 Views
Message 1 of 2
Report
1 REPLY 1

So the header images on the mobile version are a bit tricky. It won't display the whole image just part of it. What you can do is put in some custom code to override where the banner is, I've found that using a image position as centered does help a bit. In your case the phone number on the mobile version is getting smaller, just not small enough to look good with your background header. I did a little playing around with the code and I got it to look pretty good in my opinon.

Insert this code under "Pages" > click on "Personal Training" on the left > SEO Settings and then paste it under "Header code" and republish. You won't see the changes in the editor, but on your live mobile version, it should look different.
This will center your background image.

<style>
.wsite-section.wsite-header-section.wsite-section-bg-image {
    background-position: center !important;
}
</style>


Now if you want to change your headline font on mobile. You can add this code below to the same area in "Header code" you can combine the codes under one <style> </style> or leave it as two (one is recommended)

<style>

@media screen and (max-width: 1024px) {
   .banner-inner .wsite-section-elements .wsite-content-title a {
    font-size: 30px !important;
 }
}

</style>
1,135 Views
Message 2 of 2
Report