show/hide div based on browser size using ONLY css?

Question

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>

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

http://jsfiddle.net/RtTsy/

Comments

[JStormThaKid]

thanks! 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]

thanks! 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]

also @Hushme - Thanks for the jsfiddle link! It really helped out!

[Hushme]

you are welcome , im happy there was something useful for you