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 mfod
mfod
1,708 Points

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

lucybeck
lucybeck
6,055 Points

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

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

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!

Roslynn Tellvik
Roslynn Tellvik
2,790 Points

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.

beatagozdziaszek
beatagozdziaszek
9,945 Points
beatagozdziaszek
beatagozdziaszek
9,945 Points

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.

DJ Millward
DJ Millward
6,651 Points
DJ Millward
DJ Millward
6,651 Points

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.

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

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.

lucybeck
lucybeck
6,055 Points
lucybeck
lucybeck
6,055 Points

Thank you Nejc.

rachaelallison
rachaelallison
9,521 Points
rachaelallison
rachaelallison
9,521 Points

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

rachaelallison
rachaelallison
9,521 Points
rachaelallison
rachaelallison
9,521 Points

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

Phew. These little details get me sometimes!