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
Ed Bennett
10,612 PointsShould I just use min-width?
This is more an opinion discussion rather than an actual question .....
In the video Guil uses both min and max width on a media query. Should it not just be min width, with base styles for the elements at mobile size and then expanding on it using min-width media queries to build on the styles until you reach a desktop layout?
Guils code (or something to that effect):
@media only screen and (max-width: 769px) and (min-width: 481px) {
body {
background: orange;
}
}
@media only screen and (max-width: 480px) {
body {
background: green;
}
}
Should it not be:
body {
background: green;
}
@media only screen and (min-width: 480px) {
body {
background: orange;
}
}
@media only screen and (min-width: 769px) {
body {
background: blue;
}
}
I guess this is the whole debate on using max-width or min-width in media queries!! :)
In a further video, he does go on to discuss the mobile first approach, which implies that it should of been shown from the beginning?!?!?
This is just out of pure curiosity! :) Happy Coding guys!
Martin Park
12,792 PointsMartin Park
12,792 PointsI think you are right and have demonstrated what good practice should be. Nick Pettit certainly used Min Width in the Responsive Web Design course. Perhaps Guil was simply showing another way to do it.