Archived topic

Different page hero for mobile devices

3 replies · Started by madmanweb on June 5, 2019

Viewing posts 1–4 of 4

June 5, 2019 at 6:48 am #920572

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?

June 5, 2019 at 7:19 am #920742

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.

June 5, 2019 at 7:25 am #920749

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.

June 5, 2019 at 7:40 am #920760

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.

This archived topic is closed to new replies.

Start building better websites today.