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

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

I cannot figure out why this is incorrect.

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

6 Answers

Hi Mariam, Take the @media. Section of code and put it at the end of put it at the end of the page.

lucybobeck has the answer you are looking for.

Media queries always come at the end of your code. You must be careful with CSS (!Cascading Style Sheet), because if you look at the name you are hinted that styles are applied in cascading order, meaning:

If you apply a media query to your CSS and the parsing of the rule is matching that style will be applied, but if you wrote another rule for the same tag, the rule that comes second is applied no matter what kind of condition is declared in the media query.

So the best way is to firstly style your tags and then use your media queries to apply styles when specific conditions are met.

lucy deserves a "Best answer", but I just explained a bit so you get the feeling why this answer is the best one.

Happy Coding!

I'm having the same issue. I attempted to place the code at the end of the page to start with but the Code Challenge screen only allows me to place my cursor (via mouse or keyboard actions) as far down as the 14th line from the top. So I am effectively unable to complete the challenge. Has anyone had a similar issue and found a work around? Thanks.

I have just realised how important it is to put CSS code in a right place. I wrote the right code put placed it on the top which CSS could not apply (it was overridden by a different code) Make sure you know where to write you code.

It looks right to me also. Which course is this ? I'm asking incase it's Sass; as then you'd use the 'breakpoint' function.

DJ Millward if you look at the top right corner of the page you can click on the "View Challenge" button and you'll be directly taken to the course and the part of the course Miriam is referring to.

Thank you Nejc.

This is the code I'm using, and for some reason it's not working. Any tips?

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

just noticed I'm missing a colon between min-width and 480px!

Phew. These little details get me sometimes!