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
Joe Dayvie
11,956 PointsMedia Queries - Direction of flow.
Howdy - As mentioned in one of the videos, Media Queries are ideal to setup for larger screens and the main aspects of your website should be setup for mobile. I currently setup my website (www.dayvie.com - which is mostly for practice, information & tracking my progress) to look the way I wanted on my laptop but now I run into the issue of it not appearing nicely in the mobile.
Is it possible to setup media queries in the opposite direction (adjust for smaller sizes)? I was thinking to use media screen and (max-height: x) but then was having troubles so I thought I would ask, thank you =)
4 Answers
Britton Zirkle
Courses Plus Student 15,005 PointsGenerally it is considered best practice to use a mobile first approach to your design and then use your media queries for larger screen sizes. It is easier to go from one column on a mobile site to multiple columns on a larger screen than it is to try and take multiple columns and manage to effects of compressing whatever padding and margins are used as well as hiding non-critical content. If your site is designed from a mobile first approach, you generally end up with a much more responsive site and it is easier to manage expanding the content. You also don't need to add tons of media queries. I would break at 768 px and again at 1224 or 1824 to create a fixed maximum size which prevents your content from being overwhelming on very large screens.
Hugo Paz
15,622 PointsIt might be some conflict inside the css. If you have a rule at the top and then you have a new one that applies to the same element, conflicts may occur.
Theres a good explanation here http://stackoverflow.com/questions/8790321/why-do-the-order-of-media-queries-matter-in-css.
Regarding view ports and media queries, looks like the better approach is a combination of both http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
Joe Dayvie
11,956 PointsI came across that when I was researching and was thinking of using the min 320 and max 480 but could not seem to get it working. I simply link the .css file like any other (link rel="stylesheet" href="example.css"), correct?
PS: Side note, do you think its worth just using viewports to make the adjustments instead? I know they are newer but for someone who does not have much historical knowledge in coding, are media queries a solid aspect that is staying around? The best way to do it?
Joe Dayvie
11,956 PointsI appreciate both of your feedbacks, thank you =)