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

Posted by Gerardo Gomez
Gerardo Gomez
1,845 Points

Build a Three Column issue

So I built the three columns using @media for over 480px. The issue I am having is that it is always three columns now. Even when I go under 480px where it should be two columns like before. Also, I didn not experience the strange behavior that Nick did when the three columns look strange making him use the nth-child trick to fix it.

In other words, now that I set

gallery li {

width: 28.3333%;

I only get 3 columns regardless of size.

I still used the nth-child code even thought I did not experience that issue where a space is created.

Please Advise. My two columns are gone under 480px.

4 Answers

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

You need to use a different break for two columns than you do with 3, so you need another media query for under 480px.

Also setting the break every nth column, where n is columns+1 won't work beyond the first row. You need to set n as the number of columns and use an offset of 1. For example, use nth-child(3n+1) instead of nth-child(4n) for 3 columns. This is an error in the video, and corrected in the written notes that appear below it.

responsive.css 
@media screen and (max-width: 479px) {
/****************************************
  Page: Portfolio - Two Columns
*****************************************/
  #gallery li:nth-child(2n+1) {
    clear: left;
  }
}

@media screen and (min-width: 480px) /*and (max-width: 679px)*/ {
/****************************************
  Page: Contacts - Two Columns
*****************************************/
  #primary {
    width: 50%;
    float: left;
  }
  #secondary {
     width: 40%;
     float: right;
  }
/****************************************
  Page: Portfolio - Three Columns
*****************************************/
  #gallery li {
    width: 28.3333%;
  }
  #gallery li:nth-child(3n+1) {
    clear: left;
  }
}

/*@media screen and (min-width: 660px) {}*/

Also if you want to make a different column layout at 660px, you'll need to add that max test currently commented out to the 3-column media query.

Gerardo Gomez
Gerardo Gomez
1,845 Points

Your code here is not even the same code or even close to Nicks. This video was messed up! thanx

Gerardo Gomez
Gerardo Gomez
1,845 Points
Gerardo Gomez
Gerardo Gomez
1,845 Points

So I saw that I put my end bracket } for @media 480px after #secondary instead of after nth-child.

When I fixed the bracket it began behaving like it did for Nick. The issue is that I have extra long captions on my Photos and nth-child does not fix my issue. I do get my two columns back if I go under 480px.

I guess extra long captions for my photos is causing this issue to not work regardless of nth-child or not.

(I used my own images and captions, I did not copy Nick)

So my site still looks broken.

Chelsea Hulbert
Chelsea Hulbert
2,238 Points
Chelsea Hulbert
Chelsea Hulbert
2,238 Points

thank you, I was having the same problem with the columns not changing from 3 columns to 2 columns under 480px and moving my end bracket fixed the issue!

Gerardo Gomez
Gerardo Gomez
1,845 Points
Gerardo Gomez
Gerardo Gomez
1,845 Points

Full responsive.css:

@media screen and (min-width: 480px){

/**************************************** Two Columns *****************************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; } }

/**************************************** Page Portofolio *****************************************/

gallery li {

width: 28.3333%; }

gallery li:nth-child(4n) {

clear: left; }

@media screen and (min-width: 660px) {

}

Gerardo Gomez
Gerardo Gomez
1,845 Points
Gerardo Gomez
Gerardo Gomez
1,845 Points

Check it out on advicepeeps.com

i dumped the current site on there. You will see under 480px in mobile mode I get my two columns back, but I get that weird space. nth-child does nothing for me in that case.