[Support request] Page Hero not responsive when screen size is 600-750

[Alexis]

Hello! I’m having trouble with my page hero. When the screen size hits 600, the page hero width jumps to 750 and stays there until the rest of the screen catches up to 750. You can see what I mean if you go to the website listed and inspect as mobile.
My media query currently reads this-

@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.page-hero {
margin: auto;
padding-right: 0px;
padding-bottom: 20px;
padding-top: 100px;
}

.page_hero_content {
font-size: 16px;
height: auto;
padding-left: 0px;
margin: auto;
}
}

That was an attempt to fix it, but it doesn’t seem to have worked! How do I make the width of the page hero image the same width as the rest of the page?

[Leo]

Hi there,

Can you try reducing the header element mobile padding and see if you can make it work without additional CSS?
https://docs.generatepress.com/article/header-element-overview/#padding

You can also try this CSS (without your own CSS) and see if it works better:

@media (max-width: 768px) {
    .page-hero {
         background-position: center right;
    }
}

[Alexis]

So now the header fits with the rest of the website, but there seems to be a break point at 600-750px…
Below 600 the page hero content snaps to the smaller size. From 600-750 the content stays at the larger size and overlaps other page elements.

[Leo]

GP doesn’t have any breakpoints between 600-750.

I do see this CSS being added by you?
https://www.screencast.com/t/Fh8w5OLM7dw

[Alexis]

But the padding still disappears from the page hero content in that range.

That code was my attempt at keeping the page hero content padding through that range. It didn’t work sadly.

I’m not sure what’s causing it. I’m not implying it’s GP–I just want to know how to fix it!

[Leo]

Can you remove your own CSS first?

It’s setting the right padding to 0.

[Author]

Posts