Responsive Design: Code Challenge: Content Defined Breakpoints.

I had it work for me with this:

@media screen and (max-width: 705px){ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } }

The issue I'm having is the challenge errors out every other time so if I make a mistake I have to start over.

@media screen and (max-width: 705px){
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
    width: 100%;
}

}

Rachel Hooper be careful with your spacing and it should work fine:

@mediascreen and(max-width:705px){

versus

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

Greg - If you are having issues with a code challenge that is not behaving please email the support team at help@teamtreehouse.com

Abigail -

Help Us ... Help You

Can you post the code you are using, remember to indent each line of code 4 spaces so it will show up correctly in the forum.

Also please, post a link to the code challenge you are having issues with and mention the step you are stuck on.

You might also be interested in our featured post on how to ask good question on the forum

@James I have sent about 15+ messages to you guys and still no resolution, I pretty much just have to hit Check Code 20+ times until it works.

To comment on the topic, where you place CSS rules is important. Rules always cascade, so placing rules at the top of the stylesheet isn't the same as placing them at the bottom. Not considering the cascade nature can lead to errors especially when you are using grid systems or CSS from another source.

Hi,

I'm having the same problem. I tried pasting that code in and I keep getting an error message.

Hey John, a common mistake that's made here is the placement of CSS rules. In this case, placing the CSS rule at the top of the stylesheet won't work, while placing it at the bottom will. If that's the issue your having now, it's important that you understand why.

I'm having trouble at this point too. Here is my code; @mediascreen and(max-width:705px){ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width:100%;} } The error I get is "Bummer! Did you set the width for grid_1 through grid_6 to 100%?" <p>Here is the link to the page <a href="http://teamtreehouse.com/library/content-defined-breakpoints"> example link</a>.</p>

Thanks for the help Sam; unfortunately it does not seem to be doing the trick. What I have now: @media screen and(max-width:705px) { grid_1, grid_2, grid_3, grid_4, grid_5, grid_6 { width:100%;} } </div> </body> </html>

Error message is the same. Thanks in advance for your continued help :)

Rachel Hooper seems like you forgot the . in front of the class names:

@media screen and (max-width:705px) { 
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 { 
     width:100%;
}
}

Is this issue still going on i see that the comments go back up 2-5 months ago but i have this issue now still..

@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } }

and the error received is Bummer! Be sure to set the media query at 705px.