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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

3 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
mrx3
8,742 Points

disregard this comment, look at my comment below for a better explanation

mrx3
mrx3
8,742 Points

Look 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.

mrx3
mrx3
8,742 Points
@media screen and (min-width: 660px) {
#gallery li {
     width: 28.3333%;
   }

   #gallery li:nth-child(4n) {
     clear: left;
   }
}

Thanks! 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
mrx3
8,742 Points

Yeah 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
mrx3
8,742 Points

I'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.

Edit: 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
mrx3
8,742 Points

Thanks Jason I missed the teacher notes, my bad I apologize.

The 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 */
}

Nope. 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
mrx3
8,742 Points

You 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.

Kent,

The styles for the 3 column gallery items are supposed to be in the 480px media query. Not the 660px one.

See my answer.