Image Size Header Element for mobile

Hi there,

you could try adding the Mobile friendly image as your header element background.
And in the Element Classes field add: custom-background

Then use this CSS to swap the image on desktop:

@media(min-width: 769px) {
    .custom-background.page-hero {
        background-image: url(desktop_image_url);
    }
}

Not sure if it will do the job correctly - let us know.

Thanks, and what about turning off the header-element completly for mobile? Would you have a suggestion for that (as I would say, that a header element for mobile often is not useful?). Klaus

You could try this PHP Snippet:

add_filter( 'generate_header_element_display', function( $display ) {
    if ( wp_is_mobile() ) {
       $display = false;
    }

    return $display;
} );

NOTE: wp_is_mobile() detects the browser NOT the screen size. So it will only apply on a mobile device not when you reduce the size of a desktop browser.

I use "navigaion as a header". So now the menu has vanished as well.... not yet the solution. Maybe deleting the header is not the right way to do it? I guess I will have to do a redesign, as a photo for a large screen of 2500 px an one for the smallest screen are maybe not managable in terms of loading time. The header element is also really static, so maybe I shouldn't use it here. Thank you Klaus

I think the media query method that David suggested (https://generatepress.com/forums/topic/image-size-header-element-for-mobile/#post-1311142) would work nicely. The browser shouldn't download the image if the media query doesn't match.

Thank you. I guess my problem is, that I don't really know what I have to do to "add the Mobile friendly image". If you could just give me a little more advice. Sorry, my fault, but...

In your Media library you can get the File URL / Link from the image you want to display on desktop. Then add the URL in place of desktop_image_url in this CSS:

@media(min-width: 769px) {
    .custom-background.page-hero {
        background-image: url(desktop_image_url);
    }
}

Ah, yes - easy. Wonderful result, loads almost immediately. Seems that google doesn't notice in their pagespeed-result, but that may come some time later. Thank you very much (as always) Klaus

You're welcome

Hello, one more question: is the breakting point in the header element set to 769px as a standard for all the mobile settings in the header element? I guess so, but want to make sure. Klaus

Yes ....
Mobile is max-width: 768px.
Tablet/Desktop min-width: 769px

Danke (thank you). Klaus

You're welcome !