How to make a my page responsive for all device

Question

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>

Answer 1

Consider a width of 400 pixels.

• width: 100%; applies because it is outside of any media query
• width: 100%; applies because the screen is within a max-width of 768px
• width: 70%; applies because the screen is within a max-width of 900px
• width: 60%; applies because the screen is within a max-width of 1080px
• width: 60%; applies because the screen is within a max-width of 1440px

So it ends up with 60%.

There is no time when a width will be within max-width: 768px without also being within max-width: 1440px .

You need to consider which order your styles are applied in.

Most people use min-width rather than max-width and keep the order from smallest to largest.

Answer 2

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.