Is there a reason why I am unable to adjust the size of thumbnail photos? I want them all to be consistent:
<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>
See complete code here: https://gist.github.com/monajalal/3dace3489e20e0aeeba5351a7987065a This is what I currently observe: https://i.sstatic.net/v6TWM.png
I am utilizing this resource: http://codepen.io/dimsemenov/pen/ZYbPJM
Update: Despite modifying the CSS, the margin-right property remains unaffected and when set to 200x200 there is no margin. What could be causing this? https://i.sstatic.net/z5saO.png
.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;
}