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
ja5on
10,338 Pointsmedia queries
How do you know what information goes inside the media queries and what goes outside?
Like clear fix. Why couldn't that go outside?
ja5on
10,338 PointsChris Conwell, i'm confused, without media queries the content takes up most of the web page so how would everything outside of the media query pertain to the mobile-first layout? I've found i have to program a media query especially to have the content fit a mobile-first layout.
2 Answers
Ryan Groom
18,674 Pointsjasonj7 You can put whatever you like in the media query, it depends on the layout of your project. Media queries can be used to set styles for multiple scenarios, for example, you can use a Print media query to determine how the page will be styled when a user prints the page. However, the most common use (in my opinion) for a media query would be to set different styles based on the width of the browser... So for example you could have three <div> elements that are stacked on top of each other (divs have a default style of 'display: block'), but you could use the following media query:
@media only screen and (min-width: 600px) {
div {
display: inline-block;
}
}
This would display the divs side by side rather than stacked on top of each other as soon as the width of the browser window reached 600px. So to answer your question, there's no right or wrong with media queries, it's all about how YOU want to style your page using them. Hope this helps!
Chris Conwell
2,268 Points"How would everything outside of the media query pertain to the mobile-first layout?"
If you're following along with the tutorial then mobile-first means: designing for the smallest screen first and working your way up.
So preview your code in a small browser window first. Small would be any size below 789px.
Your media query should be @media (min-width: 789px), That is important.
When you preview and resize your browser window at a min-width of 789px the CSS in the media query will activate.
When preview in a smaller window, the CSS before you added the media query should activate.
ja5on
10,338 Pointsoh i see oh yes that makes sense now, thanks
Chris Conwell
2,268 PointsChris Conwell
2,268 PointsEverything outside of the media query pertains to the mobile-first layout. The CSS in the media query is the style you expect to change on larger screens or browser window with a larger width.