Issue
I'm trying to get some rudimentary media querying to work, but for some reason the div using the class "container" isn't working on the media query using max width:1200px and min width: 992, it just dissapears from page when I enter that size. I have a very simple example set up and I don't understand why the div just dissapears when I enter that size? It works for the three other sizes just fine.
Am I missing something simple?
@media screen and (max-width: 768px) {
.container {
width:100%;
border:solid 1px black;
height:300px;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
.container {
width:100%;
border:solid 1px red;
height:300px;
}
}
@media screen and (max-width: 1200) and (min-width: 992px) {
.container {
margin:auto;
width: 800px;
border:solid 1px green;
height:300px;
}
}
@media screen and (min-width: 1200px) {
.container {
margin:auto;
width: 1000px;
border:solid 1px blue;
height:300px;
}
}
Solution
Try this,
@media screen and (max-width: 768px) {
.container {
width:100%;
border:solid 1px black;
height:300px;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
.container {
width:100%;
border:solid 1px red;
height:300px;
}
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
.container {
margin:auto;
width:800px;
border:solid 1px green;
height:300px;
}
}
@media screen and (min-width: 1200px) {
.container {
margin:auto;
width: 1000px;
border:solid 1px blue;
height:300px;
}
}
Answered By - Rushi Sharma
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.