Feeling a bit perplexed here. I'm working on creating a page to showcase images. My goal is to have 5 images displayed per row, with maximum spacing when the window is at its widest (~950 px). However, as the window size decreases, I want the images to get closer together until there are only 4 images per row with no space between them. This pattern will continue until reaching a specific width. Similar to Instagram, but without shrinking the images themselves. Here's what I currently have:
HTML
<ul>
<li>
<img src="0.png">
</li>
</ul>
<ul>
<li>
<img src="1.png">
</li>
</ul>
<ul>
<li>
<img src="2.png">
</li>
</ul>
CSS
ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li
{
display: inline;
}
//the images are also float left, so they are horizontal
Currently at a standstill since I don't have much implemented and unsure of next steps. Any assistance or guidance would be greatly appreciated. Thank you!