I have designed a simple image gallery using the following CSS:
.product_container {
width:100%;
display:block;
}
.product_images {
width:45%;
display:inline-block;
border:1px solid black;
}
.product_images .large {
}
.product_images .small img {
display:inline;
float:left;
margin:5px;
width:151px;
}
My goal is to feature a large image at the top, followed by rows of 3 smaller images below it. I have provided an example in this fiddle link:
https://jsfiddle.net/jdd9hzqo/
However, when resizing the page, the small images are shifting position instead of staying in neat rows of 3 while adjusting their size to match that of .product_container