CODEWITHSUNDEEP
htmlcss
user2952265
user2952265

Reputation: 1630

CSS media queries do not work for child elements

I cannot address child elements via CSS mediaqueries. How can I style the list elements in the example below for a screen width that is bigger than 800px?

js fiddle

HTML

  <ul class="navigation">
    <li></li>
    <li></li>
    <li></li>
  </ul>

CSS

   .navigation > li{ display: block; width: 10em; };

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

.navigation > li{ width: 20em; };
}

Upvotes: 0

Views: 559

Answers (2)

Krzysztof
Krzysztof

Reputation: 16140

You should get rid of semicolons after braces. Chrome doesn't like them:

.navigation > li{ 
    display: block; 
    width: 10em; 
    background: red; 
    margin: 10px; 
}

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

    .navigation > li{ 
        width: 20em; 
    }

}

Fiddle: http://jsfiddle.net/wQu9j/2/

Upvotes: 1

Venu immadi
Venu immadi

Reputation: 1605

hope it will help you, add media queries after the regular css code, 

  @media only screen and (mix-width: 800px) {
           //add your css it may help you

 }

Upvotes: 1

Related Questions