CSS CSS Layout Basics Page Layout with the Float Property Clearing and Containing Floats

media 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?

Chris Conwell
Chris Conwell
2,230 Points

Everything 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.

Chris 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
Ryan Groom
17,601 Points

jasonj7 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
Chris Conwell
2,230 Points

jasonj7

"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.

oh i see oh yes that makes sense now, thanks