To hide an image on mobile devices using CSS, you can use media queries. Media queries allow you to apply styles based on the device characteristics, such as its width.
Here's how you can hide an image on devices with a screen width of up to 768 pixels (a common breakpoint for mobile devices):
@media (max-width: 768px) {
.hide-on-mobile {
display: none;
}
}
Now, you can add the class hide-on-mobile
to any image (or other elements) you want to hide on mobile:
<img src="path/to/image.jpg" alt="Description" class="hide-on-mobile">
When the viewport width is 768 pixels or less, the image will be hidden. Adjust the 768px
value in the media query if you want to target a different screen width.
Remember, using this method only hides the image visually for users. The image will still be downloaded by the browser, which might not be ideal for performance, especially on mobile data connections. If you want to prevent the image from being downloaded entirely on mobile devices, you'll need a more complex solution involving responsive images or server-side logic.