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
Posted by 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

Joey Bruijns
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joey Bruijns
Full Stack JavaScript Techdegree Graduate 47,878 Points
Joey Bruijns
.a{fill-rule:evenodd;}techdegree seal-36
Joey Bruijns
Full Stack JavaScript Techdegree Graduate 47,878 Points

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.

Samuel Molahloe
Samuel Molahloe
8,468 Points
Samuel Molahloe
Samuel Molahloe
8,468 Points

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.

Dan Burt
Dan Burt
597 Points
Dan Burt
Dan Burt
597 Points

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
Brian Foley
Brian Foley
8,440 Points

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