- This topic has 13 replies, 3 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
June 2, 2020 at 5:16 am #1311006Klaus
I have a header element with an image width of 2500px or so, it takes a long time to load on mobile (like 7 seconds). Is it possible to have a different header element for the mobile screen or turn the header element off completly on mobile? Thanks Klaus
June 2, 2020 at 7:24 am #1311142DavidStaffCustomer SupportHi 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.
June 2, 2020 at 8:37 am #1311396KlausThanks, 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
June 2, 2020 at 9:02 am #1311454DavidStaffCustomer SupportYou 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.June 2, 2020 at 10:04 am #1311567KlausI 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
June 2, 2020 at 2:39 pm #1311829TomLead DeveloperLead DeveloperI 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.
June 2, 2020 at 3:44 pm #1311878KlausThank 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…
June 3, 2020 at 2:57 am #1312199DavidStaffCustomer SupportIn 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); } }
June 3, 2020 at 12:19 pm #1313115KlausAh, 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
June 4, 2020 at 2:39 am #1313740DavidStaffCustomer SupportYou’re welcome
June 4, 2020 at 4:34 am #1313866KlausHello, 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
June 4, 2020 at 5:14 am #1313916DavidStaffCustomer SupportYes ….
Mobile is max-width: 768px.
Tablet/Desktop min-width: 769pxJune 4, 2020 at 6:19 am #1314002KlausDanke (thank you). Klaus
June 4, 2020 at 6:32 am #1314019DavidStaffCustomer SupportYou’re welcome !
-
AuthorPosts
- You must be logged in to reply to this topic.