[Support request] Different page hero for mobile devices

[madmanweb]

Hi.

I’d like to add a different page hero for mobile devices because my desktop page hero is too high. I tried adding another header element and set the class to hide-on-mobile and set the main page hero to hide-on-desktop, but that’s not doing it.

Any ideas on how to make this happen?

[David]

Hi there,

any chance you can link me to the site so i can take a look at alternative ways of resolving the height issue. It may just be a case of adjusting the Mobile top and bottom padding in the header element.

[madmanweb]

https://wordpress-151076-839570.cloudwaysapps.com/episodes/2019/05/13/episode-120-resisting-state-injustice/

The current page hero height is set to 500px. For mobiles, I want it to be only 250px high and use a smaller version of the hero background image that’s only 250px tall.

[David]

So maybe something like this CSS:

@media (max-width: 768px) {
    .single-post .page-hero {
        max-height: 250px !important;
        background-size: cover !important;
    }
}

then its just a case of adjusting the ‘logo’ image – let me know.

[Author]

Posts