switch page header options between mobile vs. desktop?

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

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.

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>

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

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.

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"

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;
    }
}