18 February 2013/By Tim D

Responsive Thumbnail Gallery


Recently I completed a great tutorial by Joshua Johnson at the Design Shack website, building a responsive thumbnail gallery with pure CSS and media queries. I needed a gallery that would respond to the myriad of devices that my client's customers would potentially be viewing their website, AJ Windows And Building, on. 


Affordable Web Designer For Plymouth, Devon, UK - Article Image


The final result can be viewed here. The basic gallery can be achieved with CSS and HTML mark-up alone, along with some simple media queries (more of which later). The aim is to make the grid of thumbnails adapt, or 'respond' to the width of the viewport they are being displayed on.

The tutorial starts by wrapping the galleries’ repeatable elements in a container <div>. 

The basic HTML looks like this: 

<div class="container">

    <div class="galleryItem">

        <a href="#"><img src="..." alt=""></a>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet...</p>

    </div> 

    <div class="galleryItem">

        <a href="#"><img src="..." alt=""></a>

        <h3>Title</h3>

        <p>Lorem ipsum dolor sit amet...</p>

    </div>

</div>

To add items to the gallery, copy and paste the galleryItem <div>. We then use CSS to create the container, set it’s width, and center it on the screen:

.container {

    width: 80%;

    margin: 30px auto;

    overflow: hidden;

}

It is important to set the widths with percentages, so that the page is fluid and will adapt to different resolutions. Next we ensure that images will smoothly resize by setting the max-width property:

.galleryItem img {

    max-width: 100%;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}

Now we have to work out the width and margin for each of the elements in the gallery. As with the container as a whole, each of these will need to use a percentage so they adapt to changes in the viewport size. As this gallery has five columns, each with a margin of 4%, this leaves us with only 80% of the width to take up with the actual columns. We divide 80 by 5 to arrive at the figure of 16% for the width of each column. 

However, this layout starts to look messy and squashed as we reduce the page size (try resizing the browser window and you will see what I mean). To address this problem, we can use media queries to insert some breakpoints that will change the columns to a more appropriate size. 

To decide on the breakpoints, I find it easier to wait until the design offends you, then change it with a media query. When I first started out learning responsive design, I inserted breakpoints that corresponded to the main device resolutions out there. As the number of device viewports and resolutions multiplied, I quickly, quite frankly, got bored and confused. I believe that I am not the only web designer who feels this way. 

Please note, it is important to use both “max-width” and “max-device-width” here, so that the design will adapt on both desktop browser windows as well as any devices with physical screen sizes under this width.

DEMO  |  SOURCE CODE



Published on 18 February 2013 in Responsive Design