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 Build a Responsive Website Responsive Design Content Defined Breakpoints

Ryan Holm
seal-mask
.a{fill-rule:evenodd;}techdegree
Ryan Holm
Front End Web Development Techdegree Student 12,726 Points
Posted by Ryan Holm
.a{fill-rule:evenodd;}techdegree
Ryan Holm
Front End Web Development Techdegree Student 12,726 Points

Media Queri 705px

body { font-family: 'Nunito', sans-serif; font-weight: 100; font-size: 1.25em; color: #faf3bc; background-color: #420600; } @media screen and (max-width: 705px) { .grid_1 .grid_2 .grid_3 .grid_4 .grid_5 .grid_6 { width: 100%; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { margin-right: 1.25%; float: left; display: block; } .alpha { margin-left:0; } .omega {margin-right:0; }

.container{ width: 90%; max-width: 800px; padding: 4% 0; margin: auto; } img { max-width: 100%; } h1 { font-size: 1.750em; line-height: 1.25em; font-weight: 100; letter-spacing: -2.75px; }

h2 { font-weight: 100; font-size: 1.15em; color: #b4c34f; } .cupcake { box-sizing: border-box; background-color: #faf3bc; padding: 8px; margin: 0 0 5% 0; } }

3 Answers

Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points
Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points

Hi. You missed the commas between the .grid_n clasess

@media screen and (max-width: 705px) 
{ 
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; }
}
Ryan Holm
seal-mask
.a{fill-rule:evenodd;}techdegree
Ryan Holm
Front End Web Development Techdegree Student 12,726 Points
Ryan Holm
.a{fill-rule:evenodd;}techdegree
Ryan Holm
Front End Web Development Techdegree Student 12,726 Points

Thanks...still get.....Be sure to set the media query at 705px.

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

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } }

Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points

Hmmm the code is ok, try to put the media querie at the end of the css rules.

Ryan Holm
seal-mask
.a{fill-rule:evenodd;}techdegree
Ryan Holm
Front End Web Development Techdegree Student 12,726 Points
Ryan Holm
.a{fill-rule:evenodd;}techdegree
Ryan Holm
Front End Web Development Techdegree Student 12,726 Points

Not sure.....it keeps asking to correct the media query to 705px. It matches everything that was given during the presentation. So, I'm going to assume it is broken, or the wrong number was given i.g. 750 or 575. Because, if you preview the code, it is breaking where it should.

Doesn't' instill a lot of confidence when learning media queries ;)

Thanks for your help Juan!

Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points

It's weird, I've tried the challenge again and the code it's ok. Here is what I've put after the .cupcake selector:

.cupcake {
  box-sizing: border-box;
  background-color: #faf3bc;
  padding: 8px;
  margin: 0 0 5% 0;
}

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

Maybe is something wrong with your browser's cache, have you tried in another browser? Anyway at the least, we can be for sure that the code is ok.

Have a nice day!