[Resolved] How to get header image to fit all 3 formats (Desktop, Tablet and Mobile)

Home Forums Support [Resolved] How to get header image to fit all 3 formats (Desktop, Tablet and Mobile)

Home Forums Support How to get header image to fit all 3 formats (Desktop, Tablet and Mobile)

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #614702
    Sally

    Hi,

    I am new to wordpress and GeneratePress, so need some help. I can’t seem to get the header image to fit for all 3 views. If I adjust it to fit the mobile then it doesn’t fit desktop or tablet.

    Any tips and guidance in the right direction would be great.
    Thanks,
    Sally

    PS. Website not live yet, hosting on local server so not sure how to share.

    GP Premium 1.6.2
    #614727
    David
    Staff
    Customer Support

    Hi Sally,

    is it possible to provide a screen shot? You would need to host the image somewhere, and then add the link to it using the img button above (or just the link will do if its a shared drive).

    #616402
    Sally

    Thanks, please find link for screenshot of the Tablet version. Mobile is even worse.
    Screenshot Tablet Header

    Thanks,
    Sally

    https://1drv.ms/u/s!AsbJmPHP_QfWgYUdkZ3YPtMLSwo4gw

    #616569
    David
    Staff
    Customer Support

    Hi Sally, the image link is broken. Can you edit the post above and just add the URL to where the image is stored?

    #616578
    Sally

    Hi David,

    Just done it again. Copy and pasted the link from the message and it works fine.
    THanks,
    Sally

    #616594
    David
    Staff
    Customer Support

    Hi Sally, so couple of questions, have you add the image as a background image to the header and then increased the padding on the header for it to display correctly on desktop?

    #616595
    Sally

    Hi David,

    Yes, I added it a background image but it didn’t appear correctly at all, only a small part of it appeared so the only way I found that it appeared correctly was by padding it out to make it appear correctly on desktop.

    I assume that this is what is causing the problems?
    Thanks,
    Sally

    #616598
    David
    Staff
    Customer Support

    Do you intend to place anything over the top of the image? If not you could add it as the logo in the Customiser > Site Identity. Then the image would just fill the space available.

    If not we may need a little CSS to adjust the padding for mobile and tablet. Let me know.

    #616604
    Sally

    No, I don’t intend to put anything else on it, I just want the image to appear as the Header and adjust as needed to fit the tablet and mobile sites.

    I need the image too appear nearly in full so can always adjust the size before I load it.

    #616614
    David
    Staff
    Customer Support

    OK so lets try a little CSS – add this to additional CSS in the Customiser, and then adjust the % for the mobile and tablet until it fits, you can use PX instead but % should cover off those inbetween sizes:

    /* Header padding - mobile */
    @media (max-width: 360px) {
        .site-header .inside-header {
            padding: 25%;
        }
    }
    /* Header padding - tablet.
    @media (max-width: 1024px) and (min-width: 361px){
        .site-header .inside-header {
            padding: 25%;
        }
    }
    #620433
    Sally

    Thanks David,

    Seems to have worked with the mobile site but can’t seem to get the tablet one to work. I have tried changing the % but doesn’t seem to move, any ideas?

    Thanks,
    Sally

    #620449
    David
    Staff
    Customer Support

    Hi Sally,

    i have adjusted the code above for the Tablet version, give that a shot and tweak the padding accordingly.

    #620559
    Sally

    Hi David,

    Sorry, still not moving. I have tried lots of different % and it doesn’t move at all. Just changed the 25 to a different number and hit publish but nothing. Obviously I copy and pasted the new code but no change.

    I am in the process of building it again as I had it on a local server and I can’t get it to move over to the live site, just not working so will build again and then see if it works or not.

    Thanks,
    Sally

    #620650
    David
    Staff
    Customer Support

    If you can get a live server version then that would allow us to diagnose the problem.
    Let me know.

    #623155
    Sally

    Hi David,

    It is currently sitting on the server but not on live view yet as the old site is sitting on the domain name. Is there anyway of me sharing it with you before it goes live?

    Also, got another slight problem. One of the text boxes, for some reason when I go to the mobile site is scrambling the text, so appears all squashed. It is only 1 text box, on 1 page where there are more and they are all set up the same, so can’t work out what has gone wrong!

    Thanks
    Sally

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.