Different header on mobile and desktop views

Hi there,

is this the image behind the text beginning with: I’m Rob. A nonconventional ?

yes it is

One method would be:
1. Edit the block element hook.
2. Select the Container Block and Duplicate ( 3 dot menu in toolbar ).
3. Edit the first copy and add your Mobile background image.
4. With that block still selected in Advanced > Additional CSS Class(es) and add hide-on-desktop hide-on-tablet
5. Then select the other Container with the original destkop background image and in Advanced > Additional CSS Class(es) and add hide-on-mobile

fantstic thank you- what image size ; ratio would you recomened for full screen?

Tricky one thanks to the many device sizes - i like to work 16:9 ratio on desktop and if creating a mobile specific image switch it around 9:16

I'm experiencing a similar issue https://www.rankin4education.com/ but I used the Header element not a Hook. Looks fine full screen but crops on mobile.Is there a way I can create a separate header graphic or get it to scale for mobile? Thanks.

Hi Ronnie,

In header element you can set a different set of paddings for the page hero on mobile by clicking the mobile icon.

Your current top padding is set to 206px and bottom padding is set to 300px, you can try set the padding to 80pxtop and bottom for mobile.

Let me know :)

That worked. Thanks!!!

No problem :)

Is it possible to combine hide-on* with another class name in Additional CSS classes?

For instance, when just adding hide-on-desktop (or mobile) it works.
But for the Guten gallery block, if I add a class masony-gallery (which works on its) own and also add hide-on-desktop, the block is not hidden:
ex: hide-on-desktop masonry-gallery does not work (regardless of order of class names)

Hints? Thanks

It depends on if the other class masonry-gallery has its own displayCSS, if so, they will be overriding each other.

But usually,hide-on-* should work, as it has !important in its CSS.

If you can link me to your site and point me to the element which contains both classes, I can have a look for you :)

On the link below, I have a Guten Gallery with 3 pics, added the masonry-gallery class and hide-on-mobile but the hide-on class is not working. You probably right, the masonry- plugin definitely has display CSS which could be interfering.
http://www.mondisti.com/testing-stuff

Hi Lucie,

I'm not seeing thehide-on-mobile class has been added, did you remove it.

The masonry-gallery does havedisplay: flex;, but the hide-on-mobile should still work as it has higher priority with media query and !important.

Can you add the hide-on-mobile class and I'll check back again?

Let me know!

Sorry for the delay, Rogers put me in a long time-out corner yesterday, and I'm just getting caught up.
Strange that you don't see: masonry-gallery hide-on-mobile is what is in the Additional CSS text box.
I've reflushed the cache to make sure. When you have a moment, can you have a looksee again please.