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.

CSS

William Newell
William Newell
1,482 Points

images moving

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;

  }
William Newell
William Newell
1,482 Points

I have targeted the images using .gallery li img { }

They are behaving better by not overlapping each other but they still move about when cnarrowing browser.

4 Answers

Maximillian Fox
PLUS
Maximillian Fox
Courses Plus Student 9,236 Points

Have you set

img {
  max-width: 100%;
}

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

William Newell
William Newell
1,482 Points

Hi

Yes I have tried max widths.

I wonder should I be using the nth child tag

Mark Pryce
Mark Pryce
8,804 Points

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
William Newell
1,482 Points

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
Mark Pryce
8,804 Points

I can see the css but no html if you could use the 'Markdown Cheatsheet' to post your code and html to make it more readable I can look into it further.

Let me know. Good luck.