CODEWITHSUNDEEP
htmlcss
BinaryDude87
BinaryDude87

Reputation: 33

Media Query for only one Pixel size

Is there a way to create a media query for one size only? 

@media(min-width: 484px) {
      img {
           display: none;
      }
}

The example above shows the image will disappear starting at 484px on. Is there a way to write a media query where the image will only disappear at 484px and reappear at 485px without adding another media query?

Also, is there a way to write a media query to do something between two sizes without writing 2 - 3 media queries?

I was wondering if there is a way to write both of these on one line.

Upvotes: 3

Views: 3932

Answers (3)

user3186555
user3186555

Reputation:

why not just 

@media (width:484px) { ... }

?

That is to say:

@media(width: 484px) {
      img {
           display: none;
      }
}

Mozilla's documentation for media-query media-features

Upvotes: 6

Carlton
Carlton

Reputation: 838

You can chain media queries:

To hide the image for 484px only:

@media (min-width: 484px) and (max-width: 484px)  {
      img {
           display: none;
      }
}

Update

@DaMaxContent provided a better solution. Just use width instead of both min-width and max-width.

 @media (width: 484px) {
          img {
               display: none;
          }
    }

Upvotes: 2

Shashank
Shashank

Reputation: 2060

You should do like the following code:

CSS:

@media(min-width: 484px) and (max-width: 484px) {
      img {
           display: none;
      }
}

It will hide only at the defined pixels.

Hope it helps you.

Upvotes: 0

Related Questions