images moving

Question

Hello.
I have two rows of four images within my Li tags. when narrowing browser these images are moving over the top of each other. I want these images to stay in the two rows of four.
Can you give me any directions. Code below.
.gallery is my ul.
I have the images within my 8 Li's in html file.
I have used img in css for class. 
.gallery { background-color: yellow;
           padding: 0;
           margin: 0;
           text-decoration: none;
           line-height: 0;} 
.gallery li { background-color: blue;
              width: 25%;
              display: inline-block;
              text-decoration: none;
           } 
img { margin: 0;
      padding: 0;
  }

Maximillian Fox · Accepted Answer

Have you set
css
img {
  max-width: 100%;
}

That should make your img shrink as your li gets smaller and stop the overlapping.

William Newell · Answer

Thanks for the reply.
I do use % but I can't seem to get it to work. I don't want to use a float. I had entered ul and want images in li's to stay in their rows.
I put up my full coding on css and html.

Mark Pryce · Answer

You want to set your margins and width. Remember you need to use a fluid img approach, this means use relative positioning values such as % and not a strict value like px.
Without a full copy of your code I cannot give a good example.
 Edit: you might want to start your design from mobile first as 4 images next to each other on a small screen can be very hard to do, then use media queries to set break points and change the layout for a bigger screen. 
Happy coding.

William Newell · Answer

Hi
Yes I have tried max widths.
I wonder should I be using the nth child tag

Welcome to the Treehouse Community

Looking to learn something new?

William Newell

William Newell

images moving

William Newell

William Newell

4 Answers

Maximillian Fox

Maximillian Fox

William Newell

William Newell

Mark Pryce

Mark Pryce

William Newell

William Newell

Mark Pryce

Mark Pryce