CODEWITHSUNDEEP
htmlcssresponsive-designflexboxmedia-queries
tommyd456
tommyd456

Reputation: 10713

How to make a responsive row of images

I'm trying to work out how to make a row of images responsive to the window width. So far I have:

<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;
}

This works nicely but what I want now is to make the fifth image disappear when the window is less than 880px and have the remaining four images resize to take up the remaining space.

I've tried adding a wide-only class to the fifth div tag:

<div class="wide-only"><img src="/img5.jpg"></div>

and then added a few media rules as shown below but it isn't quite working:

.image-slider div img.wide-only {
  display:none;
}

@media(min-width:880px) {
  .image-slider div img.wide-only {
    flex: 1 /* not sure what this should be - tried display: flex too */
  }
}

Upvotes: 0

Views: 1451

Answers (2)

Robert Wade
Robert Wade

Reputation: 5003

If you want to avoid adding additional classes in your html markup you can accomplish this with the nth-child pseudo selector and keep your markup cleaner and more maintainable.

.image-slider div:nth-child(n+5); is going to match the 5th, 6th, and so on child divs of image slider.

As an example below there are two of your 'sliders' one containing 5 elements and one containing 9 elements. Below 880px it will only show 4. Above that all will show.

An approach like this is more scalable because you can simply add additional media queries with a higher nth-child value, for instance if you wanted to show 6 at 1024 or something, 8 at 1280, etc. And you don't have to edit your HTML and your CSS to do it.

You'll notice I also reversed the media query to use max-width, so that we start with small screens, and improve the experience as they get larger. Sort of a mobile first approach.

(Obviously, view the snippet full screen)

.image-slider {
  display: flex;
  margin-bottom: 1rem;
}

.image-slider div {
  flex: 1;
  margin: 3px;
}

.image-slider div img {
  width: auto;
  max-width: 100%;
}

@media(max-width:879px) {
  .image-slider div:nth-child(n+5) {
    display: none;
  }
}
<div class="image-slider">
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
</div>


<div class="image-slider">
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274374

You added display:none so in the media query your should add display:block (i also corrected some CSS selector as you were not targeting the correct tag) :

.image-slider .wide-only {
  display:none;
}

@media(min-width:880px) {
  .image-slider .wide-only {
    display:block;
    flex: 1 /* not sure what this should be - tried display: flex too */
  }
}

a full code :

.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;
}

.image-slider  .wide-only {
  display: none;
}

@media(min-width:880px) {
  .image-slider .wide-only {
    display: block;
    flex: 1/* not sure what this should be - tried display: flex too */
  }
}
<div class="image-slider">
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div class="wide-only"><img src="https://lorempixel.com/400/400/"></div>
</div>

Upvotes: 3

Related Questions