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

Zaida Libertini
Zaida Libertini
2,417 Points
Posted by Zaida Libertini
Zaida Libertini
2,417 Points

Hello, the problem of the fourth item jumping to the right happens when my screen is enlarged not made smaller.

If I adjust the size to the small width, I see my text description wrapping and the gallery stays in 3 columns in the correct order. However, I see the problem that nick describes about the 4th item when I "enlarge" my screen to desktop size. I am not sure what I am doing wrong but it is backwards to what the video describes.

Zaida Libertini
Zaida Libertini
2,417 Points
Zaida Libertini
Zaida Libertini
2,417 Points

Here is my responsive.css code:

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

  /****************************************
  TWO COLUMN LAYOUT 
  ****************************************/
  #primary {
    width: 50%;
    float:left;
  }

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

}


 /****************************************
  PAGE: PORTFOLIO
  ****************************************/


#gallery li {
  width: 28.3333%;

}


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

}


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

}

1 Answer

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hello,

Try to add a clearfix class inside your html element(4th item that jumps as you said). This will clear both floating elements next to it.

.clearfix{
clear: both
}

Cheers!

Zaida Libertini
Zaida Libertini
2,417 Points
Zaida Libertini
Zaida Libertini
2,417 Points

Hi, thank you for responding.

I haven't learned about clear fix yet. Where exactly should I add that? In the index.html page? I would like to understand why I am having this problem also. I cant seem to understand, the video shows that it should happen when the screen is made smaller and the gallery picture captions wrap, and then fix it the the nth child element. I did everything and added the nth child, but the problem for me happens when I enlarge my page, not minimize.

Zaida Libertini
Zaida Libertini
2,417 Points
Zaida Libertini
Zaida Libertini
2,417 Points

I figured out that I had closed my first media query before I had too...Therefore some things were not applying to it in responsive. I also had added a space before the (4n) in nth-child, and that was also causing problems.

I am so happy I was able to figure it out! Thank you for your feedback...I guess Ill learn about clearfix soon :) Have a great night.