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

Ray Foote
Ray Foote
982 Points
Posted by Ray Foote
Ray Foote
982 Points

the breakpoint for devices 480px or larger is what has me messed up. min-width isn't working.

not sure what I'm doing wrong here

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

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Ray,

Your code is correct, except it is not in the right place. Media Queries need to be at the end of the CSS file. If you put them at the top, then they will be over-written by the code in the CSS file. In this case, your Media Query for the h1 will be over-written and cancelled out about half way down the sheet.

Always place Media Queries at the bottom the file. This would be the "Cascading" part of CSS.

Keep Coding! :)

:dizzy:

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

Hi Jason,

Do you think they should always go at the bottom of the file completely or just the CSS involved? Let me give you a scenario. Lets say I have 10 sass files. Lets imagine 4 of those parts are core features that are very different and use different styling/naming conventions. Would you reccomend the media queries go at the bottom even then or would it make more sense to just have the media queries at the bottom of that specific part? I know a lot of CSS files are broken down into core parts so just wondering what you think about situations like that.

Ray Foote
Ray Foote
982 Points
Ray Foote
Ray Foote
982 Points

Ahh! Yes, thank you! Duh, Cascading for a reason. ;)

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Sue Dough,

That's a really interesting question, and one I've never really given much thought to. I haven't done much front-end work and none to the caliber of your example.

However, given your example, I would leave the media queries with the specific parts. In a large project, to me, that makes the most sense logically. Putting them all at the end of one file would make readability and referencing pretty difficult. A tiny CSS file would be fine at the end, but a large one with multiple Sass files not so much.

Also, with Sass, you have the option of nesting Media Queries, so if you're nesting, the files wouldn't be at the bottom anyways.

You know, you've given a very interesting scenario. I'm going to be doing some research into what others do, but I would also be very interested in what others here on Treehouse think. Could you open a new discussion and paste your comment there, so others can see it and respond. It should make for a very informative discussion, so thank-you! :smiley: