Home Forums Trusted Optimizing for mobile phone

This topic contains 3 replies, has 2 voices, and was last updated by  Andy 3 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #3625

    Colleen
    Participant

    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 3 months, 3 weeks ago by  Colleen.
    #3636

    Andy
    Keymaster

    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

    #3649

    Colleen
    Participant

    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 3 months, 3 weeks ago by  Colleen.
    #3653

    Andy
    Keymaster

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.