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 trialJean Romero
12,568 Pointscant get the media query to work help please
i dont know why media query isnt working????
@media screen and (max-width: 480px) {
h1 {
font-size: 2.5em;
}
}
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: Changa One, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
2 Answers
Marco van Vemden
12,553 PointsTry putting the media query at the bottom of the css file. Css is read from top to bottom. The rule that is set last, is the one that will be executed.
In this case, the
h1 {
font-family: Changa One, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
will overwrite the font-size set in the media query.
Mark Dekin
26,839 PointsMarco nailed this one, but just to add and give advise, do mobile first approach. To where you would start the site at mobile size write the CSS for it there, and once you are done, on the bottom, you begin your media queries of min-width. So all the stuff you write first will carry throughout the site and will only have to be over written as the sizes increase. Hope this helps?
Jean Romero
12,568 PointsJean Romero
12,568 PointsThanks brother just found out