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 trialConnor Baker
586 PointsCreate a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.
I honestly don't understand how to do this! Someone help me !
a {
text-decoration: none;
}
@media screen and ( min-width: 480px ) {
h1 {
font-size: 2.5em;
}
}
#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;
}
16 Answers
Salman Akram
Courses Plus Student 40,065 PointsHi Connor,
You need to place this media queries on the bottom, not top.
Make sure you add one missing bracket.
Hope that helps. :)
Nelson J
7,411 Pointswhy do they have to be at the bottom? the teacher didn't explain that.
Ben Ragsdale
14,187 PointsYou have to put the media query code at the bottom of the other CSS code. Because it 'cascades', your current h1 code below the media query is overwriting the media query code.
Gabriel Hubermann
5,700 PointsPut on the bottom
@media screen and ( min-width: 480px ) {
h1 { font-size: 2.5em; }
}
Connor Baker
586 PointsI put the code
@media screen and (max-width: 480px) { h1 { font-size to 2.5em; } }
at the bottom and hit and i still got errors
Ben Ragsdale
14,187 Pointschange to min-width
Salman Akram
Courses Plus Student 40,065 PointsActually, you should add your code with one missing bracket.
@media screen and ( min-width: 480px ) {
h1 {
font-size: 2.5em;
}
} <-------------------------------- missing bracket
Nicolas Daniel
Courses Plus Student 3,030 PointsTnx guys for your suggestion:
@media screen and (min-width: 480px) { h1 { font-size: 2.5em; }
@media screen and (min-width: 660px) { h2 { font-size: 1.75em; } Placed at the very bottom of your ccs code works like magic!
adityasayre
3,496 Points@joshua campbell
@media screen and (min-width: 480px) { h1 { font-size: 2.5em; }you forgot h1 ending curly bracket here ""}""
@media screen and (min-width: 660px) { h2 { font-size: 1.75em; } same as above}
Kel Kni
1,577 PointsIt would be better if it specified: place @ the bottom of the page.
Scott Delman
5,436 PointsThat worked for me.. but I may have missed something.... why does it have to be a the bottom of the page?
Connor Baker
586 PointsOmg Thanks! <3333
Connor Baker
586 PointsOkay, Thanks.
Connor Baker
586 Pointshahahha thanks alot guys <3 I got it now.
Salman Akram
Courses Plus Student 40,065 PointsAwesome!
Phil Starr
3,149 Pointsgreat thanks guys, at least my code was correct, just in wrong place
surajgantedi
8,555 Points'''@media screen and (min-width:30em) { h1{ font-size:2.5em } }'''
Try this.... I referred to css-tricks.com, seems like we should set em instead of px
joshua campbell
Courses Plus Student 1,611 Pointshey guys! what am i doing wrong :-/
@media screen and (min-width: 480px) { h1 { font-size: 2.5em; }
@media screen and (min-width: 660px) { h2 { font-size: 1.75em; }
joshua campbell
Courses Plus Student 1,611 Pointsthe directions are: After the first breakpoint, create a second breakpoint for devices 660 pixels wide or larger. Inside the breakpoint, set the h2 font-size to 1.75em..
Bryson Coles
1,067 PointsThank You Salman Akram Appreciate it.
Sandeep Krishnan
9,730 Pointsmine was not working until I put it in the end
Mary-ashley Holtz
2,398 PointsSandeep, I received the "bummer" error at first, because I was placing this code at the top of my CSS page. Can you explain to me why it has to be at the bottom? Does this CSS break point just have to be after the H1 code? Or does it have to be placed at the bottom?
Thanks! Mary-ashley
stef22
5,354 Pointsstef22
5,354 Points