Grow your CSS skills. Land your dream job.

Minimal Responsive Image Gallery

  • # September 9, 2012 at 1:35 pm

    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:

    http://codepen.io/msguerra74/pen/pJIGF

    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!

    # September 9, 2012 at 2:18 pm

    You can add float:left to the #gallery img and this will remove all the whitespace. then adjust the percentage to the correct numbers.

    # September 9, 2012 at 4:42 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".