I've been trying to set up a 'gallery' section on one of my pages, with three elements featured. However, I'm running into an issue where resizing the window or viewing on a smaller screen could cause overlaps or force a second row with one of the elements. Is there any solution for this problem? I've attempted using viewport width (setting the li element width to 33vw), but it doesn't seem to be effective. Ideally, I'd like to maintain the resizing property based on 'vw'.
Below is a link to a JSfiddle demonstrating the problem. When the element width is adjusted to 33vw, it spills over to a second row. To illustrate what I mean by having a horizontal row with evenly spaced li elements, I kept it at 30vw. Additionally, is there a way to shrink these elements further, say to 25vw, and align them centrally with equal spacing between them?
https://jsfiddle.net/1ofc4275/3/
HTML:
<div id="gallery">
<ul>
<li> Thing1 </li>
<li> Thing2 </li>
<li> Thing3 </li>
</ul>
</div>
CSS:
#gallery ul {
margin: 0;
padding: 0;
width: 100%;
}
#gallery ul li {
text-align: center;
border-right: 2px solid black;
list-style: none;
display: inline-block;
width: 30vw;
}
Thank you in advance for your assistance!