Easy Responsive Design: Thumbnail List

Create a list of thumbnail images that re-sizes according to screen width. Uses simple semantic HTML markup together with a bit of CSS3. Media queries can be used as a further enhancement to this technique.

Works with modern browsers including IE8+

HTML:

<ul class="thumbnail-list">
  <li><img src="http://placekitten.com/200/200" alt=""></li>
  <li><img src="http://placekitten.com/200/200" alt=""></li>
  <li><img src="http://placekitten.com/200/200" alt=""></li>
  <li><img src="http://placekitten.com/200/200" alt=""></li>
  <li><img src="http://placekitten.com/200/200" alt=""></li>
  <li><img src="http://placekitten.com/200/200" alt=""></li>
  <li><img src="http://placekitten.com/200/200" alt=""></li>
  <li><img src="http://placekitten.com/200/200" alt=""></li>
</ul>

CSS:

.thumbnail-list {
  /* remove default list styles */
  list-style: none;
  margin: 0;
  padding: 0;
  /* remove spaces between li tags*/
  font-size: 0;
}

.thumbnail-list li {
  display: inline-block;
  vertical-align: top;
  width: 33.333%;
  padding: 2%;
  box-sizing: border-box;
}

.thumbnail-list img {
  display: block;
  width: 100%;
}

How it works

The first step to styling the unordered list (ul) is to remove default list styles. (If you are already including a CSS reset you can skip this part.) The thumbnail list items (li tags) which contain the images are lined up by displaying them as inline-blocks. Change the width to alter how many items line up in a row. Padding is used to space out the images. (This value can also be changed according to your preferences.) Finally, the CSS3 style “box-sizing” is set to “border-box” to prevent the padding from being added to the total width of the list items. (This allows the images to be spaced out evenly.)

Besides the CSS3 “border-box” style, the final key to making the design responsive is to set the image width to 100%. This ensures that the images always shrink and expand to occupy the full available width inside the li tags they are wrapped width. One disadvantage to making the width 100% is that the images can grow larger than the original sizes which may make them look pixelated. If you want to prevent this you can change “width” to “max-width”. This will still shrink images to fit smaller screens but will not expand them beyond their original size. (Setting the images to “display: block” just removes line-spacing so images will be evenly spaced vertically.)

Optional enhancement using Media Queries

Use media queries to change the number of thumbnails displayed in a row depending on screen orientation or width. Here’s an example of how you can customize the display to show more images in a row for the landscape view of mobile devices such as iPhone and Android.

Additional Optional CSS:

/* Landscape */
@media screen and (orientation:landscape) {
  /* show more in a row */
  .thumbnail-list li {
    width: 20%;
    padding: 2%;
  }
}

See it in action: https://codepen.io/KristinB/pen/XWadjPx

NOTE: This layout can actually be achieved without the CSS3 “border-box” style by using margins instead of padding to space apart list items and changing the value of the width + margin to equal the total space you want each item to occupy. For example to display 4 images in a row you would use: “width: 23%; margin: 1%;” which equals 25% in total since the margin gets added to both sides of the li tag.

CAVEAT: If you want to include text inside the li tags remember to set the font-size of the li to your desired value as by default it will inherit “font-size: 0” from the ul styles.

Advertisement

Posted by kristinlbradley on June 21, 2012

https://kristinlbradley.wordpress.com/2012/06/21/easy-responsive-design-thumbnail-list/