Get rid of extra space in image gallery

Question

I'm trying to figure out why there is extra space added to the right of the thumbnail images. I put a red border around the area to make it easier to see the extra white space. how would I remove it?

Any advice would be greatly appreciated.

jQuery(document).ready(function() {
  $('.thumb').click(function() {
    $('.main-image img').attr('src', $(this).children('img').attr('src'));
  });
});

.pics {
  overflow: hidden;
  width: 60%;
  box-sizing: border-box;
  padding-left: 6em;
  display:flex;
  justify-content:center;
}

.main-image {
  width: 100%;
  
}
.main-image img {
  width: 100%
}
.thumb {
  position:relative;
  width:30%;
  height:auto;
  margin:1em;
  border: 1px solid blue;

}
.selection-image {
display:flex;
flex-direction:column;
border:1px solid red;
}
.selection-image img {
  width:100%;
  height: auto;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
  <div class="main-image">
    <img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
  </div>
  <div class="selection-image">
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
    </div>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1511644547841-f467df8071a4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=151cc232aa6e73bab1aa03d23b276046">
    </div>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1477868433719-7c5f2731b310?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=5d54dfa7ff8cdf7d4214d468d7c7443b">
    </div>

  </div>
</div>

Because your thumbs are 30% in width, 30% of the original image width and your thumb containers are 100% width of the original image in the available space — Huangism, Mar 01 '18 at 20:29
`.selection-image` grab the rest of horizontal space available in the parent element. — connexo, Mar 01 '18 at 20:29

Temani Afif · Answer 1 · 2018-03-01T20:37:51.863

Maybe simply move the width:30% to the container instead. Also make the image block to avoid the whitespace under them:

jQuery(document).ready(function() {
  $('.thumb').click(function() {
    $('.main-image img').attr('src', $(this).children('img').attr('src'));
  });
});

.pics {
  overflow: hidden;
  width: 60%;
  box-sizing: border-box;
  padding-left: 6em;
  display: flex;
  justify-content: center;
}

.main-image {
  width: 100%;
}

.main-image img {
  width: 100%;
}

.thumb {
  position: relative;
  height: auto;
  margin: 1em;
  border: 1px solid blue;
}

.thumb img {
  display: block;
}

.selection-image {
  display: flex;
  width: 30%;
  flex-direction: column;
  border: 1px solid red;
}

.selection-image img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
  <div class="main-image">
    <img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
  </div>
  <div class="selection-image">
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
    </div>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1511644547841-f467df8071a4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=151cc232aa6e73bab1aa03d23b276046">
    </div>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1477868433719-7c5f2731b310?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=5d54dfa7ff8cdf7d4214d468d7c7443b">
    </div>

  </div>
</div>

score 0 · Answer 2 · answered Mar 01 '18 at 20:36

You are setting width of the pictures in thumb class to 30% and not centering the images. Set width of thumb class to auto and you can remove margin/padding if you want no white space.

.thumb {
  position:relative;
  width:auto;
  height:auto;
  margin:1em;
  border: 1px solid blue;
}

Get rid of extra space in image gallery

2 Answers2