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

[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.

[David]

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).

[Sally]

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

Thanks,
Sally

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

[David]

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

[Sally]

Hi David,

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

[David]

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?

[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

[David]

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.

[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.

[David]

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%;
    }
}

[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

[David]

Hi Sally,

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

[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

[David]

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

[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

[Author]

Posts