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
Paul Murphy
6,162 PointsMedia queries
Hi Guys, need help
I have three media queries as follows:
@media screen and (min-width: 768px)
@media screen and (min-width: 481px) and (max-width: 767px)
@media screen and (max-width: 480px)
The media query that targets screens above 768px and the media query that targets mobile (480px and below) work fine. The middle query for tablets and small screen laptops does not respond to any CSS declarations I attempt to apply.
Really, all I want to do is hide a column from being displayed and force the images in my nav to shrink to stop them from breaking onto a new line.
Any ideas?
8 Answers
Jovanny Elias
16,204 Pointswhen I resize my browser all your queries are working. The column you wanted to hide #3 is not showing up just how your quires are currently set up. and as for the images on your navigation They are not displaying at all on any size browser. I have also tried changing the margin and color of some elements to see if your tablet media query was working and it is. It takes any change that I make. have you made changes to it since?
Jovanny Elias
16,204 PointsIf you are creating a mobile first website from what I have read you have to place your queries in order from small screens to large screens. Some browsers and or devises will not properly show them if they are not in order. Check out this blog post it explains the logic behind queries. Try and see if that works your queries are written correctly so that's not the issue. Let me know if that helps
Phuc Tran
6,542 PointsThe order queries matters on design approach (mobile or desktop first), but not syntactically. In this case, you would have many elements those are declared in (min-width: 768px), will be overridden by the next middle queries, because that's how CSS specification works. Your css code, I assume, is a desktop first approach. It should be working. Can you give more details, or host the code somewhere for example at CodePen so we can take a look at it? :)
Here is an related Q&A: link
Paul Murphy
6,162 PointsI followed the code structure used by Guil in the sessions as a basis for the site which I believed was a mobile first approach but hierarchically I see your point.
here's my code:
Paul Murphy
6,162 PointsI took the advice of Phuc Tran and re-ordered my media queries starting with mobile, then tablet/laptop followed by desktop. It still didn't seem to work for me. I tried a few different types of media queries and cannot understand how they do not work for example with this one:
@media screen and (min-width: 481px) and (max-width: 767px)
To me that should apply anything to a viewport between those 2 width declarations but when I try it doesn't work. Is this a case of specificity? rather than targeting body in the other 2 media queries should I instead target html > body (just using that as an example)
This is really frustrating as I am happy with the overall layout of my site for mobile and desktop I just need a few changes to be applied to tablet and laptop before I can move onto creating further pages.
Paul Murphy
6,162 PointsNavid Mirzaie Milani do you have any suggestions for this?
Paul Murphy
6,162 PointsNavid Mirzaie Milani do you have any suggestions for this?
Paul Murphy
6,162 Pointsplease ignore.... I think I have just stumbled across the answer.