-2

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>
Change
  • 19
  • 8
  • Did you manage to create a registration form? – Konrad Sep 22 '22 at 19:29
  • The form front end and server is ready but I stuck at this point. Little confusion about cookies and session management – Change Sep 22 '22 at 19:33
  • If it's ready and you didn't use cookies or session that means you don't have to use them – Konrad Sep 22 '22 at 19:35
  • I converted your code to a live demo (click Run code snippet, then Full page, then adjust the width of your browser) and cannot reproduce the problem. – Quentin Nov 14 '22 at 11:09
  • I'm not sure if a problem was ever specified; what does "*not responsive to all media queries*" mean, specifically? – David Thomas Nov 14 '22 at 11:11
  • media queries do not work with the various screen sizes that I mentioned in my code. like the 768px media applied for all the screen sizes. What I do now? – Change Nov 14 '22 at 11:19
  • "like the 768px media applied for all the screen sizes." — No, it isn't. – Quentin Nov 14 '22 at 11:22
  • Could you please double-check the question after I edited it? – Change Nov 14 '22 at 11:22
  • Oh. I see what the problem is. I was just looking for a change, and I saw one when the width of my browser was over 1440px – Quentin Nov 14 '22 at 11:23

2 Answers2

3

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

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.

Mohammad Genius
  • 49
  • 3