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

17

10

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

Posted 2013-07-28T01:04:43.853

Reputation: 1 187

Answers

16

class name can't start with the digit. change it to e.g. x700,x490,x290 and it should work

Jerzy Zawadzki

Posted 2013-07-28T01:04:43.853

Reputation: 1 861

3thanks! 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 – 2013-07-28T02:28:20.133

5

class name cant be a number and cant be start with a number in css, here i changed class name its working good

http://jsfiddle.net/RtTsy/

Hushme

Posted 2013-07-28T01:04:43.853

Reputation: 2 770

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 – 2013-07-28T02:28:44.527

also @Hushme - Thanks for the jsfiddle link! It really helped out! – JStormThaKid – 2013-07-28T02:31:49.850

you are welcome , im happy there was something useful for you – Hushme – 2013-07-28T02:37:00.840