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
Stephanie Roberts
16,757 PointsMedia Query wont work
I have created a Media Query for my homepage for smartphones and it doesn't work. Even when I inspect the element on Google, my media query doesnt show up!
/* Smartphones (portrait) ----------- */
@media (min-width:1px;) and (max-width : 320px) {
.main-nav li {
margin-top: 12px;
background-color:#EBE6E8;
border-radius: 10px;
}
}
6 Answers
Chris Shaw
26,676 PointsYour current media query doesn't need (min-width:1px;) and as it will only trigger on screens with a width up to or equal to 320px, the below will suffice.
Also it's best practise to always define the media query type as generic media queries will simply apply to anything which isn't what you want.
/* Smartphones (portrait) ----------- */
@media screen and (max-width: 320px) {
.main-nav li {
margin-top: 12px;
background-color:#EBE6E8;
border-radius: 10px;
}
}
Jonathan Grieve
Treehouse Moderator 91,254 PointsTry removing the semi colon from your min-width:1px; declaration.
Stephanie Roberts
16,757 PointsChris I changed my code to that and it still wont work in the browser. None of my styles are applying.
Jonathan Grieve
Treehouse Moderator 91,254 PointsThe only other thing I'd suggest is to make sure your selector is correct and that it shouldn't be li.main-nav rather than .main-nav li.
Everything else seems to be fine.
Chris Shaw
26,676 PointsThere can be a few different reasons for a media query not to work, the most common problem is a missing viewport meta tag in your <head> tags like the below one.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The other issue is your media queries are been overwritten by another part of your CSS and it executes in source order which means from top to bottom.
Stephanie Roberts
16,757 PointsAlready had that viewport meta tag in Chris, still nothing :(
Stephanie Roberts
16,757 PointsI have two other Media queries above this one and they both work fine.
Andrew Shook
31,709 PointsStephanie, have you tried running your CSS through a validator. My guess is that somewhere above this media query there is a CSS syntax error that's causing CSS engine in the browser to skip this. CSS syntax errors usually pop up because of an extra/missing curly brace, semicolon or colon outside a curly brace.