[Ronel]

I have a page – full width, no sidebar – on which I have a single photo aligned to the right of the text and a gallery of thumbnails below the text (default wordpress gallery, no plug-in).

The width of the gallery is responsive and fills most of the width of the screen but for some reason the padding on the right is different to that of the individual picture, so that the gallery and the picture on the right don’t align. How do I adjust the padding of the gallery on the right so that it aligns with the picture?

[Sakin]

@Ronel: Please post in your gallery page URL so that I can check in and suggest you the fix.

[Ronel]

@Sakin: This is the page http://novelnatter.com/about

[Ronel]

I think I know why this is happening.

The gallery style takes the full content width and divides it into the number of defined columns (in my case 5 columns). Each thumbnail is then placed on the left of its column. The result is that the first thumbnail aligns on the left with the text but the last thumbnail doesn’t align on the right because the column is wider than the thumbnail.

In an ideal world, the first thumbnail would align left, the last thumbnail would aligh right and the remaining thumbnails would be spread evenly between them. I have no idea how to do that though.

[Sakin]

@Ronel: It cannot be done perfect like that as your image size and the percentage of width need to match. If you want like that then you might need to consider using plugin. I recommend you the plugin like “Jetpack” where you have module like “Tiled Galleries”.

For this gallery, either you have make it aligned left, center or right. So, best option will be to align center. For that you can add the following css in “Appearance => Theme Options => Custom CSS” box:

.gallery .gallery-icon img {
    display: block;
    margin: 0 auto;
}

[Ronel]

OK, thank you.

[Author]

Posts