Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Let's Practice Media Queries!

Posted by Amany Oweja
Amany Oweja
4,018 Points

what is the problem

when i write @media (max-width: 575px) {} error appears and when i write @media screen and (max-width: 575px) {} the error disappeared.

Miguel Guzman
.a{fill-rule:evenodd;}techdegree
Miguel Guzman
Front End Web Development Techdegree Student 10,025 Points

Did you figure it out? If not could you post your code?

Miguel Guzman
.a{fill-rule:evenodd;}techdegree
Miguel Guzman
Front End Web Development Techdegree Student 10,025 Points

If it did help, consider marking it as the best answer :)

2 Answers

Miguel Guzman
.a{fill-rule:evenodd;}techdegree
Miguel Guzman
Front End Web Development Techdegree Student 10,025 Points

Okay one last thing, by errors do you mean that certain areas of your code are highlighted in red such as max-width?

If that is the case then you are completely fine and your code will load as it should!

Amany Oweja
Amany Oweja
4,018 Points

yes that is, the code is highlighted in red and i am wondering about thanks a lot

Amany Oweja
Amany Oweja
4,018 Points
Amany Oweja
Amany Oweja
4,018 Points

No i did not yet

/* ================================================= 
   Practice Media Queries
==================================================== */

/* Target viewport sizes less than 575px */
@media screen and (max-width:575px){

  header {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  .logo {
    margin-bottom: 0;
  }
  nav a {
    padding: 6px 0;
    background: #def1f9;
    margin: .2em 0;
  }
  img {
    display: none;
  }
}

/* Target viewport sizes 576px and wider */

@media screen and (min-width:576px){
  .logo {
    float: left;
  }
  nav {
    margin-top: 24px;
  }
  nav li {
    display: inline-block;
    margin: 0 0.45em;
  }
  h2 {
    margin-bottom: 1.5em;
  }
}

/* Target a viewport range wider than 575px and narrower than 992px */

@media screen and (min-width:575px)and (max-width:991px){
  nav {
    float: left;
    margin-left: 20px;
  }

}
/* Target viewport sizes 768px and wider */

@media screen and (min-width:768px){
  .articles {
    float: left;
    width: 65%;
  }
  aside {
    float: right;
    width: 30%;
  }
}

/* Target viewport sizes 992px and wider */

@media screen and (min-width:992px){


  nav {
    float: right;
  }

}