Media queries aren't applied

HTML-CSS
1

I was just going back and improving some of my certification projects, and I don’t understand why my first 3 media queries are never applied. I couldn’t spot the mistakes, so I would be very grateful for your help.

in theory, I created 5 media queries to be applied at different limits. my code in general works and passes the test, but the end result doesn’t look like I want it to.

Your code so far

@media only screen and (min-width:400px),(max-width:600px){
  *{
    margin: 5px;
  }
  #title{
    font-family: Arial, sans-serif;
    font-style: italic;
    font-size: 12vw;
    text-align: center;
    color: white;
    padding: 20px 0px 20px 0px;
    margin: 10px;
    background-color: #718879;
  }
  body{
    background: #C4D0CD;
    color: white;
    font-family: Montserrat;
    display: block;
    font-size: 5vw;
  }
  #description{
    font-size: 6vw;
    text-align: center;
  }
  .suggestions{
    font-size: 5vw;
  }
  .personal_info{
    border: 1px solid #718879;
  }
}
@media only screen and (min-width:601px),(max-width:800px){
  *{
    margin: 5px;
  }
  #title{
    font-family: Arial, sans-serif;
    font-style: italic;
    font-size: 9vw;
    text-align: center;
    color: white;
    padding: 20px 0px 20px 0px;
    margin: 10px;
    background-color: #718879;
  }
  body{
    background: #C4D0CD;
    color: white;
    font-family: Montserrat;
    display: block;
    font-size: 3vw;
  }
  #description{
    font-size: 4vw;
    text-align: center;
  }
  .suggestions{
    font-size: 3vw;
  }
  .personal_info{
    border: 1px solid #718879;
  }
}
@media only screen and (min-width:801px),(max-width:1000px){
  *{
    margin: 5px;
  }
  #title{
    font-family: Arial, sans-serif;
    font-style: italic;
    font-size: 3vw;
    text-align: center;
    color: white;
    padding: 20px 0px 20px 0px;
    margin: 10px;
    background-color: #718879;
  }
  body{
    background: #C4D0CD;
    color: white;
    font-family: Montserrat;
    display: block;
    font-size: 2.5vw;
  }
  #description{
    font-size: 3vw;
    text-align: center;
  }
  .suggestions{
    font-size: 3vw;
  }
  .personal_info{
    border: 1px solid #718879;
  }
}
@media only screen and (min-width:1001px),(max-width:1500px){
  *{
    margin: 5px;
  }
  #title{
    font-family: Arial, sans-serif;
    font-style: italic;
    font-size: 4vw;
    text-align: center;
    color: white;
    padding: 20px 0px 20px 0px;
    margin: 10px;
    background-color: #718879;
  }
  body{
    background: #C4D0CD;
    color: white;
    font-family: Montserrat;
    display: block;
    font-size: 2vw;
  }
  #description{
    font-size: 3vw;
    text-align: center;
  }
  .suggestions{
    font-size: 2vw;
  }
  .personal_info{
    border: 1px solid #718879;
  }
}
@media only screen and (min-width:1501px){
  *{
    margin: 5px;
  }
  #title{
    font-family: Arial, sans-serif;
    font-style: italic;
    font-size: 4vw;
    text-align: center;
    color: white;
    padding: 20px 0px 20px 0px;
    margin: 10px;
    background-color: #718879;
  } 
  body{
    background: #C4D0CD;
    color: white;
    font-family: Montserrat;
    display: block;
    font-size: 2vw;
  }
  #description{
    font-size: 2vw;
    text-align: center;
  }
  .suggestions{
    font-size: 2vw;
  }
  .personal_info{
    border: 1px solid #718879;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Don’t think you can use a comma like that. I’m pretty sure you need an “and” in between those two conditions, if I am guessing correctly about what you are trying to do.

MDN: Beginner’s guide to media queries

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.