[Resolved] Optimizing for mobile phone

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

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.