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
Sunil Padmanabhan
1,344 PointsI have trouble getting the Media Query working
@media (max-width: 320px) { .navigation li { font-size: 2px; } header{ max-width: 40%; } }
In the HTML, I have the following Meta Tag <meta name="viewport" content="width=device-width" />
But yet, i do not see any impact the width is 320px or below
3 Answers
Steven Parker
229,732 PointsCheck that the media query comes after any other CSS rules that might override it.
Sunil Padmanabhan
1,344 PointsI have placed the media query at the extreme bottom of the CSS file
Steven Parker
229,732 PointsTo facilitate a complete analysis, make a snapshot of your workspace and post the link to it here.
Mark (Andy) Kimbell
14,062 PointsFor some reason, mine wasn't working when I included the "all" keyword after @media. When I removed "all", mine started working.
@media (max-width: 1024px){ }
Steven Parker
229,732 PointsI'm not used to seeing "all" used as a media type, since the rule would apply to all types by default. But if you do specify a media type, you would need the word "and" between it and the condition.
@media all and (max-width: 1024px) { }