Media query not working partially

HTML-CSS
1

My media query is not working partially. It fetches some of the properties from correct query and some from the other one.

I am working on responsive web design “survey form”. I have recreated the same page and now trying to add some breakpoints in CSS.

I have also included the meta viewport tags too.

I am trying to change the label and input field sizes and positions as below:

for screen <460px
label - 30% and input - 60%

@media only screen and (max-width: 460px) {
body {
margin: 1px;
}

.selects {
width: 60%;
float: left;
margin: 0;
padding: 10px; }

label {
width: 30%;
float: left;
text-align: right;
margin: 0;
padding: 15px 10px 15px; }
}

--------------------only Body margin is working and nothing else from above code.

for screen>768px
label - 50% and input- 40%

@media only screen and (min-width: 768px) {
#container {
max-width: 960px;
margin: 0 auto; }
}

label {
width: 50%;
float: left;
text-align: right;
margin: 0;
padding: 15px 10px 15px; }

input, select {
margin: 10px;
padding: 5px; }

.selects {
width: 40%;
float: left;
margin: 0;
padding: 10px; }
}

-----------------query for <460px screens is fetching the code from query >768px instead !?

-----------------I have another breakpoint as below which is working perfectly fine:

@media only screen and (min-width:460px) and (max-width: 767px) {
body {
margin: 2px;
}

#container {
max-width: 600px;
margin: 0 auto; }
}

If anybody could help me on this please, I’d highly appreciate. Thanks!

2 
@media only screen and (min-width: 768px) {
  #container {
    max-width: 960px;
    margin: 0 auto; 
  }
}

label {
  width: 50%;
  float: left;
  text-align: right;
  margin: 0;
  padding: 15px 10px 15px; 
}

input, select {
  margin: 10px;
  padding: 5px; 
}

.selects {
  width: 40%;
  float: left;
  margin: 0;
  padding: 10px; 
}
}

I auto indented the middle section for you. Notice anything wrong? (hint, check your curly braces)

3

yea I found that extra ‘}’ . I couldn’t figure it out in my code before.

Thanks Heaps for the hint! You’re a life saver. :slight_smile:

1 Like