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

HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Mike Thompson
Mike Thompson
1,935 Points

How 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.

css/main.css
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;
  }

}
Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Robbin 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.

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Wow you're close! You're missing a grand total of one colon! Seriously, that's the big flaw here :wink: There should be a colon between min-width and 480px. Take a look:

@media screen and (min-width: 480px) {  /*  See the extra colon? :) */
  h1 {
     font-size: 2.5em;
  }
}
Robbin Arcega
seal-mask
.a{fill-rule:evenodd;}techdegree
Robbin Arcega
Front End Web Development Techdegree Student 1,369 Points

Hi! 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!

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Mark Truitt The instructions are given by Treehouse for the challenge. And this challenge requires these numbers for it to pass.

Ahh, 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Mark Truitt Yup. I agree :smiley: Didn't mean to really say that you were wrong exactly other than point out this is for a challenge, and you know how picky those can be! :wink:

Jennifer Nordell That they can be. The programming ones can be down right painful sometimes.