Genesis WordPress HTML5 Gallery Styles

Genesis and WordPress HTML5 galleries are mobile friendly, and the galleries will resize to fit the device screen. But the default styling has the images get smaller for smaller screens. This tutorial shows you how to keep larger images on smaller screens using inline-block. Note that while I’ll be using the Genesis Sample theme, this tutorial applies to most other WordPress themes.

The default styling is to start with thumbnail size images in columns; the number of columns you can choose ranges from 1 to 9. Then as the device screen gets smaller, the images first get closer together, and then the thumbnails get smaller in size. I’ve added a gray 2px border around the gallery, so that you can see it.

You’ll note that the images are smaller and touching each other. If you want the thumbnail images to stay larger at small screen sizes, you would need to add additional CSS to the @media sections for different screen sizes in your style.css.

Alternative Style

Another method to style the galleries is to always keep the thumbnail image the same size, but then as the screen gets smaller, you can allow the images to drop down, so the number of columns is one less. So you could start with thumbnails in four columns for a large screen, and then allow the number of columns to go to three columns, and then to two columns, and then to one column, if your thumbnail sizes are larger than the default 150px X 150px size.

So let’s see how easily we can do this.

Check for Theme Support

A lot of Genesis child themes have HTML5 support for galleries; Genesis Sample does not, but you can add it.

Open functions.php in a text editor. Find the following line:

<?php // Remove this line

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );

Edit this line to be:

<?php // Remove line above

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

Note the ‘gallery‘ and ‘caption‘. If they are present, your child theme already has HTML5 support for galleries.

Edit CSS Styles

Next open style.css in a text editor. Find and comment out the following lines. To comment, add /* at the beginning and */ at the end, as I’ve done.

/* ## Gallery
--------------------------------------------- */
/*
.gallery {
	overflow: hidden;
}

.gallery-item {
	float: left;
	margin: 0 0 28px;
	text-align: center;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16.6666%;
}

.gallery-columns-7 .gallery-item {
	width: 14.2857%;
}

.gallery-columns-8 .gallery-item {
	width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	width: 11.1111%;
}

.gallery img {
	border: 1px solid #ddd;
	height: auto;
	padding: 4px;
}

.gallery img:hover {
	border: 1px solid #999;
}
*/

Add New Gallery CSS

.gallery {
	overflow: hidden;
	text-align: center;
}

.gallery-item {
	display: inline-block;
	margin: 0 2.5% 24px;
	text-align: center;
	vertical-align: bottom;
}

Explanation of CSS

The first section centers the elements inside the .gallery selector.
The changes are mostly on the .gallery-item.

• Use inline-block, instead of float.
• Add a percentage left and right margin, in addition to the 24px bottom margin; I used 2.5%.
• Center everything included in .gallery-item, as before.
• Vertical align to the bottom.

Other CSS

Genesis Sample also includes the CSS below that adds some padding and a border to each image. You can comment it out, or keep it, as you prefer.

.gallery img {
	border: 1px solid #ddd;
	height: auto;
	padding: 4px;
}

.gallery img:hover {
	border: 1px solid #999;
}

You can see how much simpler this method is to style.