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

Robert Kooyman
Robert Kooyman
4,927 Points
Posted by Robert Kooyman
Robert Kooyman
4,927 Points

Responsive CSS

Hi,

why is my code not working in the code challenge?

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

Any help will be great. This is my code:

@media screen and (min-width: 480px) { h1 { font-size: 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;
}

2 Answers

John Coolidge
John Coolidge
12,614 Points
John Coolidge
John Coolidge
12,614 Points

Glancing quickly at your code, shouldn't your breakpoint be at the bottom of the style sheet? Otherwise everything else will also be applied after that breakpoint, since you've positioned it at the top of the style sheet. Be careful where you add your breakpoints, because if you add them in the wrong spot, it can mess up your website layout. Every style you want applied across the board should be up top, and every style you want after certain breakpoints should be towards the bottom. Try that out. Let me know if it works or not. I've not tried it myself.

Robert Kooyman
Robert Kooyman
4,927 Points
Robert Kooyman
Robert Kooyman
4,927 Points

Hi John,

You are correct. Thanks a lot. Although I still need some more explanation if thats ok by you?

Why would it be a problem that this would be on the top of the page? I do not understand how this conflicts with any other rules since its only about screensize?

John Coolidge
John Coolidge
12,614 Points
John Coolidge
John Coolidge
12,614 Points

The idea behind Cascading Style Sheets is that any CSS that comes after other CSS will override it. So, if at the top of my style sheet, I want all h1, h2, and h3 to have a particular font and then much further down the style sheet, I want my h2 to have a different style of font, when I load my web page the h1 and h3 will have font style A applied, but my h2 will not have font style A applied because later on down the style sheet I applied font style B to the h2.

Likewise with a breakpoint. Everything below the breakpoint applies to that breakpoint, and everything above it does not. 

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

The code I pasted above should apply to the website no matter what its screen size. So, If I put this code below the breakpoint, that means it will only apply when the screen size is 480px in width or larger. It won't apply on screens smaller than 480px. The same goes for the rest of the CSS that's written in this exercise's example code. You want those styles to apply no matter the screen size, but if you place them after the breakpoint, they will only apply on screens larger than 480px.

Breakpoints are written at the bottom for that reason. All styles that apply to the entire website no matter the screen size are written at the top and only those styles that need to change for whatever reason are written below the breakpoint.

I hope that helps. You might also revisit some of the earlier CSS videos where CSS is explained. Guil Hernandez does a great job in one video explaining the cascading nature of CSS and how breakpoints fit into them as well; much better than I can. :)