how to space 5 pictures evenly on 1 row?

Report · Oct 12, 2017

I have 5 small pictures that all need to display symmetrically spaced on the same row of a page. Each picture will have one word printed beneath it representing the pictures. What is the best way to construct this setup as far as the div structure?

I assume create a table is not a good idea as this would not be a responsive design.

Report · Oct 12, 2017

What do you wish the images to do if the screen size becomes smaller, (or even larger) than the initial 5 images.

Possibilities are -

images automatically resize, (larger or smaller)

images flow to another row

number of images reduces/increases.

You can do all of the above using css Flexbox, css grid layouts and 'old fashioned' float based css.

Divs, articles, picture or some other element are all possible, as they are just the container and depending on how you wish the images to 'behave' as listed above will determine the type of css layout you can use.

Report · Oct 12, 2017

If the screen size becomes smaller I would wish the images (and their caption underneath) resize as much as possible until there is not enough space and then they would go below to the next row and space out as much as possible evenly.

Report · Oct 12, 2017

You mean somethink like -

http://www.pziecina.com/Adobe/lightbox/lightbox.html

The above uses flexbox, but you can change how the images and captions are displayed, (number of, and alignment) just by using the flexbox alignment properties, and varying the way each element should grow/shrink using the flex-basis property.

The article linked to by Jon, will give you the basics of using flexbox.

Report · Oct 12, 2017

Thank you Jon and pziecina for responding.

Yes that lightbox example displays the behavior I need to achieve.

I need one row with two items spaced evenly and centered; followed by one row with 1 item centered; followed by one row with the five images spaced evenly and centered.

I will use the source page for this lightbox example as a guide to try to create this behavior and check back in. Thanks for giving me a path to get there.

Report · Nov 17, 2017

Hi,

Does this page look like it is responsively adjusting correctly?

VPCFO Mission

I think I need to work on creating media queries to have the red HR that divides the first two Our Mission and Our Vission boxes go away at certain breakpoints once the page shrinks. I need to do the same with Our Values on the line below.

Report · Oct 12, 2017

CSS Flex would work well for this and is relatively easy to pick up if you already have a decent handle on CSS properties.

Here's a quick tutorial...

CSS3 Flexible Box

Report · Oct 12, 2017

Forgot to add -

If you use the html picture element, (or even just srcset) it is possible to display a different image depending on the size of the element in the viewport, using the media-query structure for those elements which are part of the html, (not css media-querys).

Report · Oct 12, 2017

If you're using a Bootstrap responsive layout, this is done very easily with an inline-list of images.

<!doctype html>

<head>

<title>Bootstrap 3.3.7 Starter</title>

</head>

<body>

<h1 class="text-center">Bootstrap</h1>

Caption</li>

Caption</li>

Caption</li>

Caption</li>

Caption</li>

</ul>

</div>

</div>

</body>

</html>

If you want to expand this into an image viewer, see my tutorial below.

Bootstrap Modal + Carousel Gallery - https://alt-web.com/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 20, 2017

So josh i guess your question has been answered, yea? Did you use flexbox or bootstrap? I am trying to solve the same issue here..

how to space 5 pictures evenly on 1 row?

1 Correct answer