Hide a img if width

[whipflash]

Hey! I’m new here and don’t know where to post this, so I hope this is right.

I want to hide a img in my html when the width size on the windows is under 600px, I tried many codes but no one is working. Could you guys help me out?

Regards

[Paulie_D]

It would depend on what ** exactly** you are trying to do.

If you display:none the image it might break your layout.

However a simple media query would be the answer. Give the image a class (or id) then

@media only screen 
   and (max-width : 600px) {
     .my-image-class {
     display:none;
     }
     }

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Be aware that just hiding the image will still mean it is downloaded on mobile, just that it won’t be displayed.

[Paulie_D]

Only by using JS to serve the content as required as far as I know.

Perhaps a new thread in that section.

Although googling “Alternatives to display none” would be a start. :)

[Author]

Posts