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

CSS How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Colin K
Colin K
3,417 Points
Posted by Colin K
Colin K
3,417 Points

Images jumping when browser reduced in size to two column layout

Unlike Nick's video my images begin to jump about when my website is reduced to a 2 column layout (see image below).

It appears to be affecting the third image unlike the fourth image in the video.

I tried the following code: 

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

}

However, this did not work and it made a gap when the website is increased to a three column layout.

Any ideas?

Image jumping screenshot

Allison Walker
Allison Walker
17,137 Points

I would add a max-size or min-size to your CSS, so that when your browser gets to a certain pixel width, you have slightly different behavior for that smaller width.

Colin K
Colin K
3,417 Points
Colin K
Colin K
3,417 Points

Thanks for the reply.

Where would you add it ?

Here? 

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #d6d6d6;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.90em;
  color: #1d754d;
}

1 Answer

Jorge Enrique Chavez Palma
Jorge Enrique Chavez Palma
12,847 Points
Jorge Enrique Chavez Palma
Jorge Enrique Chavez Palma
12,847 Points

I think, by using display: inline-block; ** instead of **float:left: in the list item, could solve the problem, also you should wrap every list item inside another div and apply the margin to it.