Trying to figure out how to create a row of images that adjust responsively to the width of the window. Here's what I have so far:
<div class="image-slider">
<div><img src="/img1.jpg"></div>
<div><img src="/img2.jpg"></div>
<div><img src="/img3.jpg"></div>
<div><img src="/img4.jpg"></div>
<div><img src="/img5.jpg"></div>
</div>
and...
.image-slider {
display: flex;
overflow-y: scroll;
}
.image-slider div {
flex: 1;
margin: 5px
}
.image-slider div img {
width: 100%;
height: auto;
min-width: 125px;
}
Works well, but now I want the fifth image to disappear when the window is less than 880px and have the remaining four images resize to take up the remaining space.
I attempted adding a wide-only class to the fifth div tag:
<div class="wide-only"><img src="/img5.jpg"></div>
Then added some media rules as shown below, but it's not quite functioning as expected:
.image-slider div img.wide-only {
display:none;
}
@media(min-width:880px) {
.image-slider div img.wide-only {
flex: 1 /* Unsure what this should be - also tried display: flex */
}
}