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 trialstephaniecharley
2,230 PointsAdding Breakpoints for Device Task #2
I keep getting the message "Bummer! Did you change the h2 font-size to 1.75em for devices larger than 660px?" Here is the code I am using:
@media screen and (min-width: 660px) { h1 { font-size: 1.75em; }
What Am I doing wrong?
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;
}
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5em;
}
@media screen and (min-width: 660px) {
h2 {
font-size: 1.75em;
}
3 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Stephanie,
The problem is you haven't closed out the media queries properly. You'll need a closing brace for your style and the media query in both cases, and you'll need a min-width
media query for each one.
So you'll want something like this
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5em;
}
}
@media screen and (min-width: 660px) {
h2 {
font-size: 1.75em;
}
}
tylerpostuma2
5,175 PointsHey Stephanie,
You are super close! The only thing is that when you are wanting to create a break point for a device that is LARGER than 660px you want to do something like this:
@media screen and (max-width: 660px) { h1 { font-size: 1.75em; }
When you use max-width, you are saying that any device larger than 660px will have this effect.
Hope this helps!
stephaniecharley
2,230 PointsThanks, but I wonder if there is a bug with the task #2. I tried it with max-width and still got the error message.
Misha Karas
5,636 PointsHey Stephanie,
The problem was that you forgot the closing tags on both media query's. These are both challanges so you can just copy and paste it.
@media screen and ( min-width: 480px ) {
h1 {
font-size:2.5em;
}
}
@media screen and ( min-width: 660px ) {
h2 {
font-size:1.75em;
}
}
Good luck with your studie!
Misha Karas
5,636 PointsMisha Karas
5,636 PointsDarn 8 minutes to late... He is right though