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

CSS CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

Posted by Christopher Sea
Christopher Sea
3,726 Points

@media, Top or Bottom.

In the How to Make a Website course, the media queries were placed at the top of the css file. In this video it has us put them at the bottom. Is there any difference in where the media queries go?

1 Answer

Brett Wood
Brett Wood
9,805 Points
Brett Wood
Brett Wood
9,805 Points

Only if you have media queries that are overlapping each other would it matter, since properties lower in the file have more precedence than those higher up in the file. However that's not very good code design so I'll just leave that at that lol. Media queries, for readability purposes, should always be at the bottom of the css file. Your base CSS properties should always be from 320px width to x-amount-of-pixels width, where x-amount-of-pixels is a breakpoint you plan to use for your first media query. This way, as you scroll down the css file, you can see the progression of properties that are applied as the screen width grows. So the file would go as follows from top-to-bottom:

  • TOP: Base Properties
  • NEXT: MediaQuery1 Properties
  • NEXT: MediaQuery2 Properties
  • NEXT: MediaQuery3 Properties
  • And so on

Sometimes media queries are in a different file, which helps to keep things organized.