Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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>
like image 302
JStormThaKid Avatar asked Jul 28 '13 01:07

JStormThaKid


People also ask

How do I hide elements based on screen size?

To hide an element in a responsive layout, we need to use the CSS display property set to its "none" value along with the @media rule. The content of the second <p> element having a "hidden-mobile" class will be hidden on devices smaller than 767px.

How do I completely hide a div in CSS?

You can hide an element in CSS using the CSS properties display: none or visibility: hidden. display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.


2 Answers

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

like image 95
Jerzy Zawadzki Avatar answered Sep 20 '22 14:09

Jerzy Zawadzki


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/

like image 42
Hushme Avatar answered Sep 21 '22 14:09

Hushme