Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Adrian Filimon
PLUS
Adrian Filimon
Courses Plus Student 6,668 Points

Using the clear method doesn't put my imagines in order

Even after using the clear method, the gap between the first and 4th image is still there when I'm scaling down the display of the browser.

Here is my code:

gallery li:nth-child(3n + 1){

clear:left;

}

Liam English
Liam English
3,837 Points

Hello, with the formatting above, I am unsure if you may of accidentally missed the # symbol at the beginning of the gallery ID selector?

Example:

/************************************
Page: Portfolio
************************************/

  #gallery li {
    width: 28.3333%; 
  }

  #gallery li:nth-child(3n +1) {
   clear: left; 
  }

Also, it might be worth checking that the code above is still contained within the overall @media screen rule itself. If it has been placed outside of the media rule, then it will not work as expected.

Adrian Filimon
Adrian Filimon
Courses Plus Student 6,668 Points

Yes, i did put # right before the selector. I watched and rewatched the code more times, I'm pretty sure I nailed it. Could it be I missed out something in the main.css or index.html? EDIT: Yes, it is within the media brackets

5 Answers

Liam English
Liam English
3,837 Points

Is the #gallery code block still inside the overall @media screen rule ?

/* Heading - 2 Column layout */

@media screen and (min-width: 480px) {
  #primary {
    width: 50%;
    float: left;
  }

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



/************************************
Page: Portfolio
************************************/

  #gallery li {
    width: 28.3333%; 
  }

  #gallery li:nth-child(3n +1) {
   clear: left; 
  }


/************************************
Page: About
************************************/  
  .profile-photo {
   float: left;
    margin: 0 5% 80px 0;
  }

}
Adrian Filimon
Adrian Filimon
Courses Plus Student 6,668 Points
@media screen and (min-width:480px) {

  /*for contacts, two columns*/

  #primary {
    width:50%;
    float:left;
  }
 #secondary {
      width: 40%;
      float:right;
    }

  /*gallery, three columns*/

      #gallery li {
    width:28.33333%;
  }
    #gallery li:nth-child(3n + 1){
    clear:left;
  }
}

here is my media block.

Liam English
Liam English
3,837 Points

Have you tried this instead?

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

I changed a few things from the video tutorial so that :

#gallery li:nth-child(3n +1) {
   clear: left; 
  }

works perfectly for me. It may be different for you.

Liam English
Liam English
3,837 Points

Without seeing any more of your code, what you have posted looks fine and there should not be any problems. I wonder if it might be a Workbook or browser cache problem?

I had the same issue. I realized that some the <p> items containing the image description sometimes take one line of space and sometimes two, depending on the width of the browser. If the most left element in one row was "two-lined" and the right one only "one-lined", the item in the next row would not be positioned in the right place.

My solution was to give the <p> items inside "#Gallery li a" a min-width of in my case 40px. Maybe you have to change that value depending on your font. Now <p> Elements with one line of text would be the same height as elements with two lines. I guess there might be a more elegant solution instead of hard-coding min-heigths but at least this solved the problem for now.