CODEWITHSUNDEEP
javascriptcssmedia-queries
Lorraine Bernard
Lorraine Bernard

Reputation: 13400

How to show/hide elements using media query?

By using media query I would like to show the last element of the following list (2) when the screen width is above 768px.

Here is the jsfiddle like.
Here is the basic css code (1).

(1)

@media only screen and (min-width: 480px) {
    .menu li.hide{    
        visibility: none;
    }
}

@media only screen and (min-width: 768px) {
    .menu li.hide{    
        visibility: visible;
    }
}

(2)

<ul class="menu">
    <li>One</li>
    <li class='hide'>Nine</li>
</ul>​

Upvotes: 0

Views: 8345

Answers (3)

thewebguy
thewebguy

Reputation: 1520

I've updated your jsfiddle: http://jsfiddle.net/yyQ5u/28/

It looks like the main problem was with the order of things and the actual media queries. I put your non-conditional CSS at the top of the CSS pane and the media queries below.

Then I tweaked the media queries which seemed to sort of cover each other:

@media only screen and (max-width: 768px) {

and

@media only screen and (min-width: 768px) {

Upvotes: 1

John Koerner
John Koerner

Reputation: 38077

You can set the min and max width on the media query:

 @media screen and (min-width: 480px) and (max-width: 768px) {

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try this - DEMO

@media only screen and (max-width: 768px) {
    body{
        background:#030;
    }
    .menu li{    
        font:12px Verdana;    
        width:100px;
        padding-left:10px;
    }
    .menu li:last-child{    
        display: none
    }
}

@media only screen and (min-width: 769px) {
    body{
        background: honeydew;
    }
    .menu li{    
        font:22px Verdana;    
        width:200px;
        padding-left:20px;
    }
}

Upvotes: 1

Related Questions