Mona Jalal Mona Jalal - 19 days ago 5
CSS Question

making all the thumbnails the same size in a gallery

Any idea why I can't change the size of thumbnail photos? I want them all be the same:

<h2>Book:</h2>

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="imgur/book/2EuGD9S.jpg" itemprop="contentUrl" data-size="900x900">
<img src="imgur/book/2EuGD9S.jpg" itemprop="thumbnail" alt="Image description" height="300" width="300" />
</a>
<figcaption itemprop="caption description">Image caption 1</figcaption>

</figure>

<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="imgur/book/Cmg3qMt.jpg" itemprop="contentUrl" data-size="900x900">
<img src="imgur/book/Cmg3qMt.jpg" itemprop="thumbnail" alt="Image description" data-size="300x300" />
</a>
<figcaption itemprop="caption description">Image caption 2</figcaption>
</figure>

<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="imgur/book/DyvInMR.jpg" itemprop="contentUrl" data-size="900x900">
<img src="imgur/book/DyvInMR.jpg" itemprop="thumbnail" alt="Image description" data-size="300x300" />
</a>
<figcaption itemprop="caption description">Image caption 3</figcaption>
</figure>



</div>


complete code: https://gist.github.com/monajalal/3dace3489e20e0aeeba5351a7987065a
This is what I see:
enter image description here

I am using this: http://codepen.io/dimsemenov/pen/ZYbPJM

Update:
I changed the CSS however margin-right doesn't get affected and if I make them 200x200 there will be no margin. Why is that?
enter image description here

.my-gallery {
width: 100%;
float: left;
}
/*
.my-gallery img {
width: 100%;
height: auto;
}
*/

.my-gallery img {
height: 150px;
width: 150px;
margin-right: 10px;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
display: none;
}

Answer

Instead of assigning a width/height to your figure, assign it to the image.

.my-gallery img {
  width: 200px;
  height: 200px;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
}