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 Merel Maas
Merel Maas
737 Points

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

fx

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;
}

3 Answers

Khambrel Davis
Khambrel Davis
24,572 Points
Khambrel Davis
Khambrel Davis
24,572 Points 
@media (min-width: 480px) {
  h1 {
    font-size: 2.5em
  }
}
@media (min-width: 660px) {
  h2 {
    font-size: 1.75em
  }
}

A breakpoint is just a media query. What I did here was create a media query targeted for devices wider than 480 pixels. The second challenge (also listed) asked for a media query for devices wider than 660 pixels.

Federica Lamberti
Federica Lamberti
567 Points
Federica Lamberti
Federica Lamberti
567 Points

what's wrong with this code?

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

Khambrel Davis
Khambrel Davis
24,572 Points

remove the 'screen and' because the challenge is just for screens with a minimum width of 480px.

Ryan Brooks
Ryan Brooks
1,774 Points
Ryan Brooks
Ryan Brooks
1,774 Points

I didn't get this one to work until I scrolled all the way down to the bottom of the css file (which was a pain) and put the code there.