CODEWITHSUNDEEP
css
ideaguy1974
ideaguy1974

Reputation: 1

Show 1 div, hide 2 others...Media Query not working

Instead of showing 1 div at a time, I'm seeing all 3 divs at the widest, and they are disappearing as I shrink the page. I can't figure out why...

<style>
@media screen and (min-width: 1280px) and (max-width: 1400px){
#W1400px { display: block;}  
#W1280px { display: none;}  
#W1024px { display: none;}
}

@media screen and (min-width: 1024px) and (max-width: 1280px){
#W1400px { display: none;}   
#W1280px { display: block;}
#W1024px { display: none;}  
}

@media screen and (min-width: 0px) and (max-width: 1024px){
#W1400px { display: none;}  
#W1280px { display: none;}  
#W1024px { display: block;}
}
</style>

Upvotes: 0

Views: 55

Answers (2)

Byron
Byron

Reputation: 389

Try this, remember, the css is case sensitive

@media  (min-width: 1281px){
#w1400px { display: block;}  
#w1280px { display: none;}  
#w1024px { display: none;}
}

@media  (min-width: 1025px){
#w1400px { display: none;}   
#w1280px { display: block;}
#w1024px { display: none;}  
}

@media (max-width: 1024px){
#w1400px { display: none;}  
#w1280px { display: none;}  
#w1024px { display: block;}
}

Upvotes: 1

Turnip
Turnip

Reputation: 36652

You need to remove the and (max-width: 1400px) from your first media query.

Currently this block only applies when the viewport is narrower than 1400px. If the viewport is wider than 1400px all three divs will be displayed.

(min-width: 0px) is also unnecessary and can be removed.

@media screen and (min-width: 1280px) {
  #W1400px {
    display: block;
  }
  #W1280px {
    display: none;
  }
  #W1024px {
    display: none;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  #W1400px {
    display: none;
  }
  #W1280px {
    display: block;
  }
  #W1024px {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  #W1400px {
    display: none;
  }
  #W1280px {
    display: none;
  }
  #W1024px {
    display: block;
  }
}
<div id="W1400px">
  W1400px
</div>
<div id="W1280px">
  W1280px
</div>
<div id="W1024px">
  W1024px
</div>

Upvotes: 1

Related Questions