How do I prevent images from displaying on my responsive website at mobile dimensions?

Question

I currently have a right-aligned image in the main body of a WordPress post, which I have placed using the WYSIWYG editor. However, I would like to prevent this image from displaying on devices with a max-width of 320px.

I am using a responsive theme but do not wish to change the way that other images on the website behave. For this reason, is it possible to target that image specifically? If so, how would I do this?

Bonus: I originally wanted to change the alignment and margins of the image at mobile width but have been unable to figure out how to do this without changing the way that it behaves at bigger screensizes.

Have been unable to find a solution thus far.

Thanks!

Answer 1

you could use media queries on the editor go to the html editor an add an id to that particular image for example <img id="target" src="some/image.jpg" />

then you could paste this on your style.css file

@media only screen  and (min-device-width : 320px)  {
 #target{ display: none; }
}