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 The Media Queries Solution

Posted by Shelly Wells
Shelly Wells
4,443 Points

You have 991 where you should have 992 on the nav section where you specify using the 'and' function.

You have 991 where you should have 992 on the nav section where you specify using the 'and' function.

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

You'll need to post your code via a workspace snapshot or markdown so we can take a look. If you're referring to a specific project or challenge, it will be helpful to link to that as well.

1 Answer

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Hi Shelly,

991px is appropriate for this media query since the goal is to target viewports narrower than 992px. By changing it to 992px you'll end up applying the styling rules in this media query as well as the rules in the last media query when the viewport is exactly 992px.

In this instance it doesn't matter too much. When both sets are applied the properties written later in the stylesheet will take priority, so float: left is overwritten by float: right and the nav items go where they need to. You're left with an unnecessary margin-left: 20px that doesn't visibly affect any parts of the layout.

If there was additional styling you could run in to issues. Say we wanted the navigation all uppercase in the narrower range but not in the wider range. Try this out in your workspace:

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

@media (min-width: 576px) and (max-width: 992px) {
  nav {
    float: left;
    margin-left: 20px;
    text-transform: uppercase;
  }
}

/* Target viewport sizes 992px and wider */

@media (min-width: 992px) {
  nav {
    float: right;
  }
}

When the viewport is exactly 992px you'll see the nav items snap to the right but retain the uppercase property. Once the viewport hits 993px they'll lose text-transform: uppercase.

I hope this helps clear things up! Let me know if you have any questions.