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>​

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>​

• javascript
• css
• media-queries

Share Improve this question Follow edited Sep 20, 2012 at 17:48 nana 4,49111 gold badge3737 silver badges4949 bronze badges asked Sep 20, 2012 at 17:06 Lorraine BernardLorraine Bernard 13.5k2323 gold badges8585 silver badges138138 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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;
    }
}

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

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

I've updated your jsfiddle: http://jsfiddle/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) {