[Support request] Big Header Image on Mobile

[Andrew]

I have http://andrewteg.com/wp3/ setup more or less how the header image needs to be on desktop but being a background image it’s giving me fits on mobile sizes. I just used padding to up the size of the header area (.inside-header I believe) and am using a 1920×800 header image. This is meant to be the header and on every page. I’m happy to use page headers but want it up above the primary navigation and not sure the best plan of attack with all the GP options I have 🙂

I’ve poked around and feel like I’m missing something to get this done right, but can’t find the right combination to get it looking good on mobile sizes. Is there a way to go about this that works for responsive sites that I’m just missing?

Thanks,
Andrew

[Andrew]

I redid it with http://andrewteg.com/wp4/ which uses <img src="http://andrewteg.com/wp4/wp-content/uploads/2017/12/pexels-photo-237180-800.jpg" /> as content on a Page Header that is merged with header. That keeps the image happy but the spacing I added to the Header (and Container/Content) keep the Primary Nav in the wrong area on mobile. So I keep getting parts right but not the whole, so I’m calling it a night and will wait for the experts to chime in!

Thanks,
Andrew

[Leo]

Hi there,

Looks like the issue is the massive padding applied to desktop is also applied to mobile as well.

Try some CSS like this:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Author]

Posts