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

Abhishek Rana
Abhishek Rana
1,515 Points
Posted by Abhishek Rana
Abhishek Rana
1,515 Points

Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.

it showing error

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;
}
Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

:warning: It doesn't look like you've written any code yet.

You need to create a media query at the bottom of the CSS file.

2 Answers

Jake Anderson
Jake Anderson
11,467 Points
Jake Anderson
Jake Anderson
11,467 Points

As Steven Parker said, you need to be sure to call the media query within your code. Some people argue that all of your media queries need to be at the bottom of your file, while others argue that it should be next the element you're changing with that query. The first method keeps all your responsiveness in one spot. The other keeps it next to the chunk that you're working on (more common in SASS/SCSS), making it so that you don't have to keep scrolling up and down in your code.

Whichever way you choose, just be sure the media query comes last in your set of declarations.

All that being said, I believe the code you're looking for can be seen below. You can see I'm calling the media query on the screen when the screen has a min(imum)-width of 480px. It is within those selectors that you can then place your h1 font-size change. Hope that helps. 

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