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
Karl Pupé
6,718 Points.main-nav inside of the media query
@media (min-width: 769px) {
.wrap {
min-height: calc(100vh - 89px);
}
.container {
width: 80%;
max-width: 1150px;
margin: 0 auto;
}
.name,
.main-nav,
.main-nav li {
display: inline;
}
}
I was just wondering: Guil in this video placed the .main-nav display declaration inside of the media query to min-width media query.
I would have thought that he would have placed the display declaration under the ‘base layout styles’ heading.
Did the reason Guil put the display declaration in there have something to do with how the navigation bar would be rendered on a mobile device?
Thanx for your help guys!
2 Answers
anil rahman
7,786 PointsYes it is because of Mobile First Approach which you can google for a better understanding. :)
Karl Pupé
6,718 PointsThank you Anil and Amed! Your answers were super helpful! Really appreciate it!
Amed Alberto Sanchez
5,995 PointsAmed Alberto Sanchez
5,995 PointsAnil is right Karl. With Guil's videos you start learning CSS scaling the website from desktop version to mobile. However, he advices that you should built the website from a mobile version first into a more complex desktop version later. In the code above Guil is changing the .main-nav to display inline when the viewport is at least 769px (tablet or desktop). You don't need one for mobile because your main code is already set for mobile devices (mobile first approach).