0

I am trying to use @media query to hide a span for tablet screen only like this:

@media screen and (max-width: 600px){
.tablet-screen {
    display: none;
}

But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?

  • [Did you read all those excellent answers "Media queries how to target desktop tablet and mobile"](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – caramba Mar 03 '17 at 16:48
  • You are missing a second closing bracket in your code – Max Klein Mar 03 '17 at 16:50

2 Answers2

0

You have to use both. Under 600px it's not tablets, but smartphones.

You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)

Demo : https://jsfiddle.net/Zetura/453gh680/

@media screen and (min-width: 600px) and (max-width: 1280px){
  .hide-tablet {
      display: none;
  }
}
Zetura
  • 446
  • 5
  • 12
0

If you use min-width then increase it from top to bottom. Sequence matters!

@media screen and (min-width:220px) { ..... }

@media screen and (min-width:500px) { ..... }

@media screen and (min-width:700px) { ..... }

@media screen and (min-width:1000px) { ..... }

CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.

And you don't need to use both at same time.

max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)

ashishtomer
  • 316
  • 1
  • 2
  • 13