gazywazy gazywazy - 2 months ago 15
HTML Question

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

Answer

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