The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Minimal Responsive Image Gallery

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #39749

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.