How to make my media scroll bar display 3 images instead of 4?

Question

.dmiss {
  background-color: rgb(255, 255, 255);
  color: #d1d1d1;
  display: flex;
  overflow-x: auto;
  gap: 10px;
}


.dm1, .dm2, .dm3, .dm4, .dm5, .dm6, .dm7, .dm8, .dm9 {
  background-color: #ffffff;
  height: 450px;
  width: 450px;
  
}

.dmn11, .dmn22, .dmn33, .dmn44, .dmn55, .dmn66, .dmn77, .dmn88, .dmn99 {
  height: 450px;
  width: 450px;
  object-fit: cover;
}

I want to have 3 images on my media scroll bar so when I scroll further, next 3 images are gonna show up. The image below doesn't show it fully but I have 4 images + a bit of 5th image. I tried to divide dmiss into 3 sections but then I didn't have all the images in the same row.

user_8565010 · Answer

You can use the flex attribute to set the items at 33.333333% so they split into thirds and I used viewport units to size them and make them responsive at the same time. I also reduced your code by quite a bit so you only have 3 classes powering your entire gallery which will make your life easier as you modify this further on your project.

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

.dmiss {
  background-color: rgb(255, 255, 255);
  color: #d1d1d1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100vw;
  height: 32vw;
  margin: 0;
}

.dmClass {
  flex: 0 0 33.333333%;
  background-color: #ffffff;
}

.dmImage {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0px 5px 5px 0px;
  object-fit: cover;
}

How to make my media scroll bar display 3 images instead of 4?

1 Answers