CODEWITHSUNDEEP
htmlcssmediaresponsive
gazywazy
gazywazy

Reputation: 3

@media screen query not working

I've made a site (fairly new to html/css) and certain @media queries aren't working. Idea being to display container1 95% of screen, on a screen less than 500px..

thanks in advance!

See code below: 

  #container1 {
    float: left;
    max-width: 45%;
    min-height: 320px;
    padding:20px;
    margin: 1px;   
    border: solid #ffffff;

}

#container1:hover { border:solid #000000;
}
#container1:hover { background-color: antiquewhite;
}

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

   #container1 {
   width: 95%;
 }
}

Upvotes: 0

Views: 52

Answers (2)

Erik Aderhold
Erik Aderhold

Reputation: 468

You have to overwrite the max-width too! Otherwise max-width: 45%; is still active.

Upvotes: 0

Omri Aharon
Omri Aharon

Reputation: 17064

You have max-width: 45%; set on it in a previous declaration. Change to:

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

   #container1 {
       width: 95%;
       max-width: none;
   }
}

Upvotes: 1

Related Questions