The order of social media queries

Hey Daniel,

The order definitely matters, since css cascades and some media queries will overwrite others if they're put in the wrong order.

You're using max-width in your example, so:

@media (max-width: 1350px) { p { font-size: 32px } }

@media (max-width: 850px) { p { font-size: 22px } }

@media (max-width: 450px) { p { font-size: 16px } }

would work, since your font-size will be shown as whatever the default value (or the value set in the css prior to the media queries) once the screen is wider than 1350px, but will be shown as 32px once the screen is less than 1350px, and will get smaller as the screen hits the defined breakpoints.

The reason the breakpoints need to be in the right order though is to avoid the situation that would occur if you positioned the media queries from smallest to largest:

@media (max-width: 450px) { p { font-size: 16px } }

@media (max-width: 850px) { p { font-size: 22px } }

@media (max-width: 1350px) { p { font-size: 32px } }

If you positioned the breakpoints in this manner, the font would never be shown as 16px or 22px since the screen widths 450px and 850px are smaller than the final breakpoint listed, which would result in the final breakpoint of 1350px overwriting them.

To clarify in an example, assume that the user's device page width is 425px.

The parser will set the css to the default value of the page, or whatever the last font-size given is in the main css.

Then the parser will find the first rule, and determine that the width of 425px is smaller than 450px so it sets the width to 16px.

Then the parser will move down the page and find the second rule, and since 425px is smaller than 850px, it will then set the font-size to 22px.

Finally, the parser will find the final breakpoint listed and determine that since 425px is smaller than 1350px, the font-size should be displayed as 32px.

So once the page loads, the user will find the font displayed really large for their screen size at 32px.

It's easy to forget that media queries will affect one another since they feel almost separate from the rest of the code, but they still abide by the cascading nature of css. So in the end, just remember that code further down the page could impact code that appears higher up the page and you'll be fine :D

Good luck with the course!