Is there a simple way (using html) to hide images from displaying on a phone?

Images on my page content looks great on desktop and a tablet but looks ridiculous on a phone. Is there was way, not using a plug in or doing anything complex, to simply use html to say "don't display this image if someone views the content on a phone"?

 

Yes, you can use CSS media queries to hide images from displaying on a phone. Here's an example:
HTML:

<img src="your-image-url.jpg" class="hide-on-mobile" alt="Your Image">

HTML:

CSS:

.hide-on-mobile {
  display: block; /* Set the default display to block */
}
@media (max-width: 767px) { /* Apply CSS styles for screens smaller than 768px */
  .hide-on-mobile {
    display: none; /* Hide the image on mobile screens */
  }
}

Code (CSS):

In this example, the image will be displayed by default, but when the screen width is smaller than 768 pixels (typically the width of a phone's screen), the `hide-on-mobile` class will hide the image by setting its display property to `none`.

 

Perfect, thank you.

 

HTML itself doesn't have built-in responsiveness features. However, you can achieve this using CSS (Cascading Style Sheets), which works alongside HTML.
Here's a solution using HTML and CSS:

1. In your HTML:

Keep your image element like usual with the <img> tag.

1. In your CSS:

Add a media query to your stylesheet. Media queries allow you to define styles based on screen size or other characteristics. Here's an example:
@media screen and (max-width: 768px) {
/* styles to hide the image on small screens */
.my-image {
display: none;
}
}
@media screen and (max-width: 768px): This part defines the media query. It targets screens with a maximum width of 768px (which is a common breakpoint for mobile devices). You can adjust this value depending on your needs.

• .my-image: This is a class you can add to your <img> tag in the HTML.