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 Kalidh Mohamed
Kalidh Mohamed
5,995 Points

breakpoints only work when added at end of a CSS document?

So I'm trying to solve the puzzle of adding a media breakpoint for widths 480px and above. I typed this code and didn't work:

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

but, when I cut and pasted the code to the end of the CSS document, it worked. I know CSS follows a cascading nature, but I don't see how setting a breakpoint at the top of the document makes any difference.

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

@media screen and (min-width: 480px) {
  h1 {
    font-size: 2.5em;
  }
}
zachary adams
zachary adams
8,365 Points
zachary adams
zachary adams
8,365 Points

it would be better to put the media queries in their own CSS file and name it for example : responsive.css. But putting them anywhere in your CSS file can work as well. I would reccomend to put the media queries at the bottom so the main part of the CSS rules will load up first. Also remember to put the media queries in ascending order so it will not mess up the cascading effects and easier to debug if you are running into some problems.

2 Answers

Joey Ward
PLUS
Joey Ward
Courses Plus Student 24,778 Points
Joey Ward
Joey Ward
Courses Plus Student 24,778 Points

It's because you have another rule that defines the font-size property for your h1 tag (1.75 em). So by placing the media query at the top, the second h1 rule will override the rule defined in the media query.

If your second h1 rule were placed in another media query that only affected screen sizes not included in your first media query, then the order wouldn't matter and they would never override one another. Because your h1 { font-size: 1.75em;} rule is NOT in a media query, it affects all screen sizes and overrides any font-size rules on h1 tags that precede it.

Kalidh Mohamed
Kalidh Mohamed
5,995 Points
Kalidh Mohamed
Kalidh Mohamed
5,995 Points

Thanks for the answer Joey. This best explains the problem I was facing.