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

Posted by Robert Yann
Robert Yann
9,975 Points

I can not figure out how to do challenge task 1 of 2 when it asks "Create a breakpoint for devices 480 pixels wide or la

Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em? I have tried everything I did in the video and even tried cutting and pasting from my own webspace!!!! please help!!!

css/main.css 
@media screen and (min-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;
}
Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Change the media query to the end of your document instead of the start

Jade Newbury
Jade Newbury
Courses Plus Student 10,564 Points

As the challenge does not give you a separate CSS file for responsive design/ media queries, you will be able to complete the challenge if you put the code at the END of the CSS file. I cannot see an issue with your code, its just in the wrong place...

Remember CSS stands for 'Cascading Style Sheet' and if you add the media query to the top of the CSS code the subsequent h1 style will overwrite the font size. In the challenge example the CSS will overwrite from the 2.5ems you set it to in the media query 

@media screen and (min-width: 480px){
  h1 {
    font-size:2.5em;
  }
}

to 1.75ems in the h1 styling:

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

So just remember to put this at the end so that it doesn't get changed as the styling cascades.

I hope this helps complete the challenge...it worked for me.

2 Answers

Falk Schwiefert
Falk Schwiefert
8,706 Points
Falk Schwiefert
Falk Schwiefert
8,706 Points

Your code looks right. Just place the media query at the bottom of the css code.

Christopher Sea
Christopher Sea
3,726 Points

'''CSS

@media screen and (min-width: 480px;) { h1 { font-size: 2.5em; } }

'''

I typed this for the answer & got it wrong. I took out the semicolon after the 480px, and I got it right. I'm not sure why though. It's also shown in the video without the semicolon. Why is this?

Richard Alegre
PLUS
Richard Alegre
Courses Plus Student 6,684 Points
Richard Alegre
Richard Alegre
Courses Plus Student 6,684 Points

Yes I got thesame problem. I put body in h1 it gave a correct answer.