show/hide div based on browser size using ONLY css?
49,928
Solution 1
class name can't start with the digit. change it to e.g. x700,x490,x290 and it should work
Solution 2
class name
can't be a number, and cannot start with a number in CSS. Here is an example where I changed the class name and it's working good
Related videos on Youtube
Comments
-
JStormThaKid almost 2 years
I am a trying to get some divs to show/hide based on browser size, using only css media queries... but nothing seems to be working... please help if you can and let me know what i'm doing wrong... thanks in advance!
heres my css..
@media all and (max-width: 959px) { .content .700{display:block;} .content .490{display:none;} .content .290{display:none;} } @media all and (max-width: 720px) { .content .700{display:none;} .content .490{display:block;} .content .290{display:none;} } @media all and (max-width: 479px) { .content .700{display:none;} .content .490{display:none;} .content .290{display:block;} }
and here's my html
<div class="content"> <div class="700">this is the content for desktop</div> <div class="490">this is the content for tablet</div> <div class="290">this is the content for mobile</div> </div>
-
JStormThaKid over 10 yearsthanks! that worked, btw, i also had to change
@media all and (max-width: 959px) {
to this@media all and (min-width: 959px) {
because it was showing all 3 div's 959px+ Thanks again! -
JStormThaKid over 10 yearsthanks! that worked, btw, i also had to change
@media all and (max-width: 959px) {
to this@media all and (min-width: 959px) {
because it was showing all 3 div's 959px+! Thanks again! -
JStormThaKid over 10 yearsalso @Hushme - Thanks for the jsfiddle link! It really helped out!
-
Hushme over 10 yearsyou are welcome , im happy there was something useful for you