[Support request] I don’t want display image on mobile

[Joe]

Hi,
Is there a way to display an image just on desktop and tablet? Not on mobile?
It’s the first image on the front page. This is a media & text box.
https://retireby40.org

It looks good on desktop, but the image is too big for mobile.
I don’t want it to show on mobile.

Thank you!

[David]

Hi there,

you can use the hide-on-* classes that GP adds:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

So select the Image Block, and in sidebar Advanced > Additional CSS Class(es) add: hide-on-mobile

[Joe]

That works. Thank you!

[David]

You’re welcome

[sevite]

I tried this with a container with a background image and it did not work. Is it because it was a container? Or a background image? Or perhaps something else? Thanks!

[David]

Hi there,

that method hides and element its not specific to an image – and the issue you will have is it will either not work or remove the container it is applied to.

Can you raise a new topic where you can share a link to the site so i can see the layout. Let us know which block you want the image hidden on mobile.

[Author]

Posts