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
Kent Mummert
1,414 Points3 col not 2 col
After placing the code as directed, when I reduce the browser window width to approximate the mobile device, the columns remain at 3 instead of changing to 2.
@media screen and (min-width: 480px) {
/************************************ two-column layout *************************************/
#primary { width: 50%; float: left; }
#secondary {
width: 40%;
float: right;
}
}
/************************************ three-column layout -portfolio page *************************************/
gallery li {
width: 28.3333% }
gallery li:nth-child(3n + 1) {
clear: left; }
@media screen and (min-width: 660px) {
}
6 Answers
mrx3
8,742 Pointsdisregard this comment, look at my comment below for a better explanation
mrx3
8,742 Points@media screen and (min-width: 660px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
}
Kent Mummert
1,414 PointsThanks! That took care of that problem.
But the issue that that is supposed to remedy is happening when the browser window is at the phone size. The columns are now correctly arrange at 2 but the 5th item jumps left or right depending on the caption for #4 (Drips...).
mrx3
8,742 PointsYeah I noticed that as well Kent, if you watch the video towards the end you can see Nick has the same problem, he never addresses it, and moves on. It happens really fast, like a split second when he resizes his browser so, you're not the only one. Hope this helps. If your question was answered could you please select the best answer option so other people know the question was answered.
mrx3
8,742 PointsI'm resizing my now, and it's the number 6 picture that stays in the right middle, and is the only one positioned while the others stay to their two column layout.
Jason Anello
Courses Plus Student 94,610 PointsEdit: Added missing #'s in front of gallery
Hi Kent,
You have closed off your 480px media query too soon.
Your css that I've added comments to:
@media screen and (min-width: 480px) {
/************************************ two-column layout *************************************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right;
} } /* <--- You closed it off right here with the second curly brace */
/************************************ three-column layout -portfolio page *************************************/
#gallery li {
width: 28.3333% }
#gallery li:nth-child(3n + 1) {
clear: left; }
/* You should be closing it right here */
@media screen and (min-width: 660px) {
}
Since you closed it off too soon this means that the styles for the 3 column gallery layout aren't inside any media query which means they will take affect even below 480px which is what I think you were experiencing.
Also, you should switch back to nth-child(3n + 1) since that is the correct expression for a 3 column layout. This correction is noted in the Teacher's notes for this video. I'm assuming that's where you saw it since you had it in there.
mrx3
8,742 PointsThanks Jason I missed the teacher notes, my bad I apologize.
Jason Anello
Courses Plus Student 94,610 PointsThe same problem with the floats and captions exists on the 2 column layout and you need to use li:nth-child(2n + 1) for that.
It should go in main.css:
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li:nth-child(2n + 1) {
clear: left;
}
This clears the first item in every row on a 2 column layout. In the 3 column layout we don't want these same items to be clearing the floats anymore because that was only good for the 2 column layout. So we have to update responsive.css to first remove the clear property on those items before setting the clear property on the correct items for a 3 column layout.
In responsive.css:
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(2n + 1) {
clear: none; /* We first remove the clear property from the items that were set earlier in main.css */
}
#gallery li:nth-child(3n + 1) {
clear: left; /* Then we can set the clear property on the correct items for a 3 column layout */
}
Kent Mummert
1,414 PointsNope. Not yet. The phone size seems to work now with the two columns. The desktop view seems also to work with the three columns.
However, when the caption for the 'drips' picture is wide enough to fit on one line, the 'creating' picture moves under it. Expanding the window wider, the 'drips' picture moves to the third row creating a space in the second column. When the expansion reaches the 660, the three column format takes over and things appear correctly,
Is there a working .css file available that I could compare with my non-working version?
mrx3
8,742 PointsYou can download the project files in the right middle side of the page called "Project Files" Just make sure you're on the correct assignment page which would be "Build a Three Column Layout.
Jason Anello
Courses Plus Student 94,610 PointsKent,
The styles for the 3 column gallery items are supposed to be in the 480px media query. Not the 660px one.
See my answer.
mrx3
8,742 Pointsmrx3
8,742 PointsLook below I pasted the answer, it's better then the one above, and you can see what I'm talking about, it didn't do the markup right. instead of (3n+1) you need to have (4n) because it will clear the 4th list item, because the text from the other picture is little too large at small screens.