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

Home Forums Support switch page header options between mobile vs. desktop?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #307379
    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

    GeneratePress 1.3.46
    #307414
    Tom
    Lead Developer
    Lead Developer

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

    #307423
    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.

    #307515
    Tom
    Lead Developer
    Lead Developer

    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>
    #314011
    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

    #314051
    Leo
    Staff
    Customer Support

    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.

    #314119
    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”

    #314128
    Leo
    Staff
    Customer Support

    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;
        }
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.