I’d like to make a simple responsive image gallery, with minimal markup and have created the basic idea in CodePen, but would like to know if there’s a better, or more efficient way to do this.
Here’s what I have so far:
I’m not sure why, but there is white space in between the images, so I had to adjust the %’s, but you’ll get the idea what I’m looking for.
Additionally, I’d like the make the images pop up when clicked in a modal “lightbox” style window, but using only CSS if possible.
Hope this all makes sense, and thanks for any help!
You can add float:left to the #gallery img and this will remove all the whitespace. then adjust the percentage to the correct numbers.
Thanks, that helped! I have the thumbnails positioned correctly with the appropriate media queries, now I just need to figure out the best way to display them when clicked.
You must be logged in to reply to this topic.