Hiding an image only on mobile

I have an image I want to hide on mobile. This is my code:

[code]

Shop The Collection

Who We Are

Text goes here, I want to keep this text but the image to be removed [/code]

There is an image background with a text overlay. The text works great on the desktop but on mobile it jumps OUT of the overlay. This is fine because it would be too small to read otherwise. So the image needs to go and just leave the text. I did a lot of looking on the internet about hiding a DIV using CSS or a “hidden-mobile” html tag but I am not sure how to implement this for my circumstance.

Does anyone here know? Thanks for any help!

A simple media query will do it. Eg:-

@media screen and (max-width: 500px) {   /* Whatever size you call "Mobile" */
      #fullWidthBlock img { display: none; }
}

The selector could be one of the classes on the img tag, use whatever fits best.

1 Like

Thanks a lot! I will sure give it a try.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.