CODEWITHSUNDEEP
htmlcss
Karnivaurus
Karnivaurus

Reputation: 24121

Combining min-width and max-width

I want div1 to appear only when the window width is less than 800px, and I want div2 to appear only when the window width is greater than 800px. My solution is to use the following CSS which works. However, is there a way to do this using only one @media command? It seems clumsy to have to write two conditions, one for a max-width, and one for a min-width.

@media screen and (max-width: 800px) {
  #div1 {
    display: block;
  }
  #div2 {
    display: none;
  }
}

@media screen and (min-width: 800px) {
  #div1 {
    display: none;
  }
  #div2 {
    display: block;
  }
}
<div id="div1">
  DIV1
</div>

<div id="div2">
  DIV2
</div>

Upvotes: 1

Views: 1452

Answers (3)

Vlad Pana
Vlad Pana

Reputation: 167

replace @media screen and (max-width: 800px) { #div1 {
display: block;
}
#div2 {
display: none;
} }

with  #div1 {
display: block;
}
#div2 {
display: none;
}

Upvotes: 0

scarsam
scarsam

Reputation: 346

There is a way to combine media queries try:

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

The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.

Or if you only want to target screen sizes that are 800px or less use:

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

Upvotes: 1

Stickers
Stickers

Reputation: 78686

Take one of the set out of media queries.

#div1 {
  display: none;
}
#div2 {
  display: block;
}
@media screen and (max-width: 800px) {
  #div1 {
    display: block;
  }
  #div2 {
    display: none;
  }
}
<div id="div1">
  DIV1
</div>
<div id="div2">
  DIV2
</div>

Or

#div1 {
  display: block;
}
#div2 {
  display: none;
}
@media screen and (min-width: 800px) {
  #div1 {
    display: none;
  }
  #div2 {
    display: block;
  }
}
<div id="div1">
  DIV1
</div>
<div id="div2">
  DIV2
</div>

Upvotes: 3

Related Questions