[Support request] The header padding on my homepage is not responsive.

[John]

The header padding on my homepage is not responsive. (I’m working
on a local host.)

The image in the header for the desktop display looks good
with header top padding of 395, mobile 155 and tablet 360.

When I set and save for the mobile display, however, the 155
value is also imposed on the desktop and tablet displays. Likewise
with the 360 value for the tablet. I.e., though I set three different
settings, the system recognizes only one at a time and it
uses for all three displays.

Any help you can provide this novice would be much appreciated.
Thanks
John

[Leo]

Hi there,

We would actually need CSS to change the header padding on mobile:

@media (max-width: 768px) {
    .inside-header {
        padding: 10px 20px 30px 40px;
    }
}

[John]

Thank you for your prompt response.

I changed the first value from
10px to 150px. This works well for the mobile display.

But it also alters the tablet display (which should have top
padding of 360px) so only the top half of the header
image is visible.

[Leo]

You will need to set different values for mobile and tablet then: https://docs.generatepress.com/article/responsive-display/

[John]

I added this CSS (see below). The desk top and mobile displays look
good. But the tablet is still a problem. This time it’s not the padding.
It’s the height of the header image which is 50% smaller (shorter) than the
desktop image. Only the top half of the image is visible.

@media (max-width: 768px) {
/* CSS in here for mobile only */
}

@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
}

@media (min-width: 1025px) {
/* CSS in here for desktop only */
}

@media (max-width: 768px) {
.inside-header {
padding: 150px 20px 30px 40px;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
.inside-header {
padding: 360px 20px 30px 40px;
}
}

[Leo]

Can you provide a link to your site?

[Author]

Posts