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

David Curran
David Curran
7,682 Points

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

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

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

4 Answers

Hi David,

Your code looks fine. Only I think it’s best practice to add media queries to the end of the stylesheet and not at the beginning. If you copy and paste your code to the end you should pass the challenge.

Hey David,

Try:

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

1) There is no need to add "screen and." 2) Because of the cascading nature of Style Sheets it's always a good idea to put your Media-Queries at the end, to override the current h1 settings when the view-point is equal to 480px or more.

In my opinion the video that's shown prior to this question, doesn't lend itself to easily answering the code challenge that is asked following it.

We hear Nick talk us through screen resolutions and using the following CSS:

@media screen and (min-width: 480px) {
}

And there is no variance around this discussed in the previous video. There is nothing to indicate that we are to remove screen and

We also see Nick using a new responsive.css page, where the code is written at the top of the page. In fact, due to cascading, this needs to be at the bottom.

I appreciate that the code challenges are meant to test our learning, but this question seems to be a little oblique compared to the information we have been fed previously (and only seen for the first time).

Brian Foley
Brian Foley
8,440 Points

Thanks, Dan. Your answer really helped me with why I wasn't passing the challenge.