Issue
I attempted to make my page responsive by using media queries. However, the box was not responsive to all media queries. I was very confused by the min and max width of the media query, Here is the code, and someone please suggest to me how to make the box div responsive for all devices. Media queries do not work with the various screen sizes that I mentioned in my code. such as the 768 px media query is applied for all screen sizes What should I do now?
.box {
border: 10px solid forestgreen;
height: 100vh;
width: 100%;
}
@media only screen and (max-width: 768px) {
.box {
width: 100%;
}
}
@media only screen and (max-width: 900px) {
.box {
width: 70%;
}
}
@media only screen and (max-width: 1080px) {
.box {
width: 60%;
}
}
@media only screen and (max-width: 1440px) {
.box {
width: 60%;
}
}
<div class="box"></div>
Solution
Your css code is right but the meta section makes problems for having a responsive page.
In meta section, you have "width=device-width, initial-scale=1.0" which you have to define all available dimensions of smartphones which is tricky and impossible. Just you need to omit that part in the code.
Answered By - Mohammad Genius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.