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
Jonathan Boos
3,564 PointsResponsive Design Code Challenge: Content Defined Breakpoints
I seem to not be able to pass the first section of the code challenge:
Write a media query at 705px where the layout begins to break, that forces grid_1 through grid_6 to span 100% width of the container.
even though I have the correct code, my code is:
@media screen and (max-width:705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, {
width: 100%; }}
Can someone assit?
Jonathan Boos
3,564 PointsI tried putting the width:100% after ever grid but it still gave me the error msg. Thanks for your help thou!
3 Answers
Alex Heil
53,547 Pointsah, thanks for your code. try to place your media queries at the bottom of the file instead of putting it directly after the body element, that should be enough to let you pass ;)
Alex Heil
53,547 Pointshey Jonathan Boos , you're nearly there, but check your grid list again. you may notice that you also added a comma after the last selector (grid_6) which is not followed by another selector - try to remove it and let the code check again - that should already solve your issue. hope that helps ;)
Jonathan Boos
3,564 PointsYeah I put that there by accident when typing this up, but without the comma behind (.grid_6) I still get the same error message. Thanks for your help thou!
Alex Heil
53,547 Pointsthat's strange - I just re-did the challenge to check that out and it worked fine at my end. perhaps there's something else going wrong so could you perhaps paste the whole code? I'm sure we can figure that out ;)
Jonathan Boos
3,564 Pointsbody {
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;
}
Jonathan Boos
3,564 PointsThat worked I moved all the code below at the bottom of the CSS sheet and it worked.. so on a side note should the media query always be put at the end of the CSS sheet?
@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;
}
Alex Heil
53,547 Pointsgreat to hear that this solved your issue. well, it's common use to have them at the bottom but the actual reason here is that the media query was before the actual grid element, so to say in short: you tried to change something in the mediaquery which has not existed at that part of the css - if you would have written the mediaquery directly after the grid and before the container for example that would have worked as well. but if you always put it to the bottom then you're on the safe side that the elements you want to target are already there - and it gives a good clear strucutre as well. hope that helped ;)
Jonathan Boos
3,564 PointsThank you for your help!! ^.^
Boylen +
Courses Plus Student 1,925 PointsBoylen +
Courses Plus Student 1,925 PointsHi you need to remove the comma after every .grid_ and insert width 100% on each grid
like this
.grid_1 { width: 100%; }