1

Here is my site: http://highcatering.wpengine.com/ There is a wedding car image there. I want to hide it when the screen size is below 600px. Why? Try reducing the browsers width enough (or look at it on mobile), you will see the text moves below the car, without a left margin and without margin between the car and the text.

I want the car to disappear.

Any ideas?

Thanks!!!

RiversO
  • 17
  • 1
  • 2
  • 7
  • As you can see, it's a wordpress theme. – RiversO Jun 25 '14 at 19:14
  • I suggest that you investigate [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). They allow you to apply CSS definitions conditionally, based on screen size. – showdev Jun 25 '14 at 19:19
  • possible duplicate of [Removing HTML element on mobile view?](http://stackoverflow.com/questions/17185811/removing-html-element-on-mobile-view) – showdev Jun 25 '14 at 19:24
  • Thanks!!! I'm new to this, so CSS advanced issues are still hard to understand. – RiversO Jun 25 '14 at 19:52

2 Answers2

3

Put it in your style.css

@media screen and (max-width: 600px) { 

.post .sc_image img { display: none; }  

}
user2653883
  • 35
  • 1
  • 5
  • it must be max-width not min-width, just noticed, sorry...edited – user2653883 Jun 25 '14 at 19:50
  • Thanks!! I added this instead: ` @media screen and (max-width: 500px) { .post .sc_image img { display: none; } } ` New problems arise: 1. The text is left without left margin. 2. Images I don't want to disappear, go away. The parallax above the car disappears, for example. – RiversO Jun 25 '14 at 19:52
  • try adding this before the last }. It is to center text... element.style { margin: auto; text-align: center; } – user2653883 Jun 25 '14 at 20:22
  • I have got to go to sleep. I'll see it tomorrow. Good night! – user2653883 Jun 25 '14 at 20:35
  • if you see my site, it works. However, the statement also hides images I don't want to hide, like the parallax above the car. I don't want that. How can I make the statement a bit more selective? – RiversO Jun 26 '14 at 13:10
  • Yes, problem solved. Thank you very much! The thing is, the theme allowed you to add a css class to each element. After adding a css class to all the images, I could be more specific with the @media screen statement. :D Thanks!!! – RiversO Jun 28 '14 at 19:56
0

This is an interesting question that is still relevant in 2022. It is easy to hide an image using media queries and display:none; (as per the other answer):

@media(max-width: 600px) { 
  .post .sc_image img { 
    display: none; 
  }
}

However the image still loads in the background - which definitely isn't ideal for pagespeed and core web vitals.

You can use loading="lazy" combined with the above solution to ensure the image doesn't load if it isn't displayed:

<img loading="lazy" src="cool-car.webp" class="sc_image" width="200" height="125" alt="This is a photo of my cool car" />

But what happens if this image happens to be near the top of the page on Desktop - "above the fold"? Adding lazy loading could cause a performance hit.

You could add the image to CSS as a background-image, but that has its own issues - namely that you can't (at the moment) support newer image file formats with a fallback yet using background-image: image-set().

I got stuck with this problem, and came up with this solution - using an old-school transparent 1x1 pixel as my fallback for smaller screens:

<picture class="sc_image">
    <source srcset="pixel.png" media="(max-width: 600px)">
    <source srcset="cool-car.webp" type="image/webp">
    <source srcset="cool-car.png" type="image/png">
    <img src="cool-car.png" width="200" height="125" alt="This is a photo of my cool car">
</picture>

I'm not sure if this is the best approach, but I think it is. For now.

Dagmar
  • 2,968
  • 23
  • 27