In this video, we will create a photo gallery, and then tweak our CSS to display the thumbnails as a responsive grid.

Now, let’s go ahead and create a photo gallery.

• Go to “Content => Add content => Photo Gallery” (node/add/photo-gallery)
• Title: Test Photo Gallery
• Body: (Lorem Impsum)
• Images: (Click “Choose Files” and select as many photos as you like thanks to the Multiupload Imagefield Widget.)
• Click “Upload”
• Click “Save”

Now we see the photo gallery, and that Panels is overriding the display by placing the images on the left, and the body on the right. Let’s tweak our CSS just a bit to make the photos display in a responsive grid type of layout.

Tweaking the CSS to display our photos in a responsive grid

First, we need to enable the “responsive.custom.css” file in Corolla.

• Go to “Appearance => Settings => Corolla”
• Click the “CSS” tab
• [x] Enable the responsive.custom.css file
• (Save configuration)

Now, let’s edit the file. You’ll find it in the Corolla theme folder, inside the css folder.

• Edit “responsive.custom.css”
• Uncomment the “@media only screen and (min-width: 220px)” section

• Add the following within the media query:

  • .field-name-field-images .field-item {
    display: inline-block;
    }

.field-name-field-images .field-item img {
padding-right: 7px;
}

Now, if we head back to the Gallery, our images are shown in a grid, and when we resize the browser, the number of images per row changes to fill the row.

The final step to make our photo gallery site complete is to create a list of all of the galleries.