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

CSS Build a Responsive Website Responsive Design Content Defined Breakpoints

Xavier Vivas
Xavier Vivas
12,810 Points
Posted by Xavier Vivas
Xavier Vivas
12,810 Points

Task 3, Stage 4 of Responsive Design

Hi everyone,

I'm having issues with the third question regarding the H1. Here's what I wrote:

@media screen and (max-width: 705px)
    {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
    width: 100%;}
  img {display: none;}
  h1    {
    font-size: 2.75em;}
  }

Any help is appreciated.

Tks!

Jennifer Hinkle
Jennifer Hinkle
8,365 Points
Jennifer Hinkle
Jennifer Hinkle
8,365 Points

what error are you getting?

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Xavier Vivas

Your CSS code wasn't showing up correctly. I fixed it in your post. For the future, to put HTML/CSS/JavaScript in a forum post:

  1. hit return to create a new line and type three back tick characters ```

  2. hit return to create another new line and paste your HTML

  3. hit return and add three more back tick characters: ``` The back tick character isn't the same as the single quote -- ' -- mark; the back tick is located on the same key as the ~ on most keyboards.

Also to add correct color highlighting add the name of the language after the back ticks like this: ```CSS. Here's what CSS should look like in a forum post:

#gallery li {
  float: left;
  width: 45%;
}

3 Answers

Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points
Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points

Hi Xavier, I tried your CSS code and it passes (even without "love at first bite" part) so I wonder why... just checking, did you make sure to put this at the end of CSS file?

Xavier Vivas
Xavier Vivas
12,810 Points
Xavier Vivas
Xavier Vivas
12,810 Points

The "love at first bite" was part 2 and that passed successfully, however, for the third question I get: "Bummer! Did you update the size of the level 1 header to 2.75em?".

I'm sure there's a small detail I can't figure out just yet...

Jennifer Hinkle
Jennifer Hinkle
8,365 Points
Jennifer Hinkle
Jennifer Hinkle
8,365 Points

After reading your comment, I tried the challenge and got code the same as yours. Maybe you have a syntax error in earlier code? 

@media screen and (max-width: 705px) {
  .grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
    width: 100%;
  }
    img {
    display: none;
  }
  h1 {
    font-size: 2.75em;
  }
}

Sometimes it comes down to a colon instead of a semi-colon, or you forgot to close an {} somewhere. Try going back through your code of earlier challenges and maybe that could fix it. I find it's usually something small I did wrong that makes it hard to catch. Even sometimes too much white space (like an "enter" in a weird place) that can throw an error in the code challenges.

I hope this is somewhat helpful. Sorry I don't see the exact problem!

Goodluck!

Xavier Vivas
Xavier Vivas
12,810 Points
Xavier Vivas
Xavier Vivas
12,810 Points

Thanks Jennifer, indeed, it should be something in earlier code coz apparently I have the right code for this task. I'll close this for now and will try to complete it at some point. Cheers!