Take a look at my website over at: . If you want to see more thumbnails, consider switching to a different album. The album titled Paris contains the most images.
If you press the "Show Photo Grid" button located in the bottom-right corner, you'll be able to view the photo/thumbnail grid that I've created.
Currently, the grid resizes based on the viewport size. I would like it to still resize according to the viewport, but instead of smoothly getting bigger, I'd like it to only be as wide as the number of thumbnails that can fit in the viewport. This way, there won't be empty white space to the right of the displayed thumbnails. I want to maintain a 20px distance from the right side of the viewport, with any extra space displayed on the left side.
How can I achieve this?
Here is the current code:
HTML
<div id="grid_outer">
<div id="grid_inner">
<div class="grid_thumb button">
<span class="thumb_title">TITLE</span>
<img class="thumb_image" src="image.jpg" alt="TITLE">
</div>
<div class="grid_thumb button">
<span class="thumb_title">TITLE2</span>
<img class="thumb_image" src="image2.jpg" alt="TITLE2">
</div>
</div>
</div>
CSS
#grid_outer {display:none; position:absolute; background-color:rgba(0,0,0,0.75); right:20px; left:20px; bottom:60px; padding:20px 10px 10px 20px; border-radius:20px; max-height:480px; overflow:hidden;}
.grid_thumb {position:relative; float:left; margin:0 10px 10px 0; width:150px; height:150px;}
.thumb_image {position:absolute; top:0; left:0; border-radius:5px;}
.thumb_title {position:absolute; bottom:0px; left:0px; z-index:100; padding:8px; background:#000; border-radius:0 5px 0 5px;}
.button {cursor:pointer;}
After some trial and error, I found that setting the width of #grid_outer to auto works well when there's less than one row of thumbnails, but it stretches to the far left side of the viewport if there's more than one row. Can anyone provide guidance on this issue?