Daniel Canna Daniel Canna - 2 months ago 6
CSS Question

Media Queries Image display none, and back again

Using

media queries
: I can make an image disappear at or below a specified
width
, no problem using
display: none;


The problem is figuring out how to do the opposite, like above a certain
width
with
display: none;

(Say I want a small logo to only show up below x pixels..)

Tried inline style set to
display: none;
then used a query to try something like
display: visible;
no good.

Best I could figure was a hack around, initial
width
and
height:0
then use the query to reset the
width
and
height
at say,
max-width:650px


I played with
min-width
and
max-width
I'm doing something wrong, is there an OPPOSITE to
display: none;
couldn't get
min-width
to do the opposite of
max-width
.

Answer

You just need to set display:none/block the img according to your needs

As I'm not sure what you really want here is 2 snippets:

snippet with image showing only above 650px

img {
  display: block
}
@media (max-width: 650px) {
  img {
    display: none
  }
}
<img src="//placehold.it/600x600" />


snippet with image showing only below 650px

img {
  display: block
}
@media (min-width: 650px) {
  img {
    display: none
  }
}
<img src="//placehold.it/600x600" />

Note: display:visible doesn't exist