Optimizing for mobile phone

[Colleen]

I can’t seem to get my theme (Trusted) to optimize for mobile phone.  I’ve tried looking in the theme appearance where to change this, but can’t find anything.  It is only the header that does not optimize/render correctly.

 

Can someone please guide me on how to correct this?

• This topic was modified 6 years, 9 months ago by Colleen.

[Andy]

Please let me know the URL of your site so I can take a look.

Is it a specific part of the header you have problems with? i.e. site title/logo, menu, phone number

[Colleen]

Hi there

 

Thank you for your response.  the url is http://www.domesticuifconsultants.co.za/   It is specifically the header image.  Everything else is fine.

• This reply was modified 6 years, 9 months ago by Colleen.

[Andy]

Thanks. The theme is not really designed to use a logo or ‘text’ based image for the header background.

I can see that you have left the logo area empty and are using the header background to place your logo.

Because of the way that the width to height ratio will change when viewing on different screen sizes, you will see some of the embedded text in your header background image cut off from view.

If you really need to display it like this, you could use create an image with a different width/height ratio for display only on mobile.

For example, your current header image is 1654×472 so you could create an image with more white space above and below your embedded text with dimensions of say 800×472, and then add the following code in the Additional CSS area of the customizer:

@media screen and (max-width: 768px){
    .main-header{
        background-image:url('path-to-image-url') !important;
    }
}

replace ‘path-to-image-url’ with the actual full URL of your new image. You can get the URL by uploading an image and then clicking the ‘edit’ link for the image or click on an image in your Media Library and copy the URL.

[Author]

Posts