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

Adrian Filimon
PLUS
Adrian Filimon
Courses Plus Student 6,668 Points
Posted by Adrian Filimon
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
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
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
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
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
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
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?

Sebastian Zimmermann
seal-mask
.a{fill-rule:evenodd;}techdegree
Sebastian Zimmermann
Full Stack JavaScript Techdegree Student 8,333 Points
Sebastian Zimmermann
.a{fill-rule:evenodd;}techdegree
Sebastian Zimmermann
Full Stack JavaScript Techdegree Student 8,333 Points

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.