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
Mike Thompson
1,935 PointsHow do i set a h1 font size inside a breakpoint correctly?
The only way it makes sense to me is this way but it appears to be incorrect.
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5em;
}
}
Any help would be great.
Thanks.
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;
}
}
Robbin Arcega
Front End Web Development Techdegree Student 1,369 PointsJennifer Nordell Gah! That was exactly it. Thank you! The error message didn't help out much in that respect, I guess...
3 Answers
Jennifer Nordell
Treehouse TeacherWow you're close! You're missing a grand total of one colon! Seriously, that's the big flaw here 
@media screen and (min-width: 480px) { /* See the extra colon? :) */
h1 {
font-size: 2.5em;
}
}
Robbin Arcega
Front End Web Development Techdegree Student 1,369 PointsHi! Popping in here because I'm having the same issue. I mean, I think I've got exactly what you've got, minus a space or two...
@media screen and (min-width:480px) {
h1 {
font-size:2.5em;
}
}
But it's still telling me I'm wrong and that I haven't set the font size properly. What on earth am I missing? Thanks so much!
Mark Truitt
17,230 PointsHi Mike,
Taking a look at your included CSS. I'm taking a guess that you are trying to increase the font size on a smaller screen size based on the fact that a browser tends to set it at 1.5ems?
If so, Jennifer pointed out part of the issue. However, one other change is needed and that is changing the min-width: 480px to max-width: 480px.
@media screen and (max-width: 480px) {
h1 {
font-size: 2.5em;
}
}
Jennifer Nordell
Treehouse TeacherMark Truitt The instructions are given by Treehouse for the challenge. And this challenge requires these numbers for it to pass.
Mark Truitt
17,230 PointsAhh, sorry. I missed that it was a challenge. Though the comment still remains true that your answer is correct for the challenge itself and if you were trying to go smaller you could just flip min to max.
Jennifer Nordell
Treehouse TeacherMark Truitt Yup. I agree 
Mark Truitt
17,230 PointsJennifer Nordell That they can be. The programming ones can be down right painful sometimes.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherRobbin Arcega Hi there! When I cut/paste the code you posted, the challenge passes. I have the sneaking suspicion that you put your media query at the top of the CSS file. This will be incorrect as it's being overwritten by the styles below it. Try moving your media query to the bottom of the CSS file.