[Resolved] switch page header options between mobile vs. desktop?

[sdanbu]

Is there a way to switch the page header when switching desktop and mobile using GP?

On mobile devices, my page header looks a lot different than on the desktop and I’m wondering if I can use a way to toggle different page headers for each screen width.

If not with GP, is there or some recommended plugin or child theme or special CSS to use?

Thanks

[Tom]

Which element are you wanting to switch? The background image? The content?

[sdanbu]

I was thinking both the content and the image because in mobile devices, my image doesn’t look small enough and the content font size doesn’t shrink and gets garbled as well.

[Tom]

For the image, you would have to use CSS media queries. It’s best to use my Simple CSS plugin as it allows you to add CSS to specific pages.

Then you could do this:

@media (max-width: 768px) {
    .generate-content-header {
        background-image: url( 'MOBILE IMAGE URL' );
    }
}

As for the content, you would have to add two blocks of content into the content area:

<div class="hide-on-desktop">
    Tablet/Mobile content in here
</div>
<div class="hide-on-mobile hide-on-tablet">
    Desktop content in here
</div>

[sdanbu]

I am trying to change the text so it doesn’t show, but when I use the above, it disappears too early. I would like it to disappear only when it is the width of 520 rather than 1216px

Instead of using

Is there a way to use a specific px attribute rather than at 1216px

Thanks

[Leo]

Hi Scott,

This is the responsive break points currently used in GP:
https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

You can hide specific div by wrapping the code using the @media method in the example link above and just change the px number.

[sdanbu]

Thanks! how do you wrap the code using @media

“You can hide specific div by wrapping the code using the @media method in the example link above and just change the px numbe”

[Leo]

Try something like this:

<div class="hide-on-px">
    Content here
</div>

Then with this CSS:

@media (max-width: 520px) {
    .hide-on-px {
        display: none;
    }
}

[Author]

Posts