Gallery right margin overflow hidden

nicallen
(@nicallen)

9 years, 1 month ago

Hi. The gallery right margin that is used to space the images makes the last item appear to be out of alignment with the non gallery image above. Could this be remedied with a hide-overflow of the last item css? Thus hiding the margin.

Viewing 4 replies - 1 through 4 (of 4 total)

Michael
(@alchymyth)

9 years, 1 month ago
Could this be remedied with a hide-overflow of the last item css?

no.

try this (either in style.css of your child theme, or via the ‘Appearance – Custimize – Additional CSS’):
```
.gallery-item { margin-right: 4%; padding-right: 0; width: 48%;}
.gallery-item:nth-child( 2n ) { margin-right: 0; }
@media screen and (min-width: 30em) {
    .gallery-columns-3 .gallery-item { padding-right: 0; width: 32%; margin-right: 2%; }
    .gallery-columns-3 .gallery-item:nth-child( 3n ) { margin-right: 0; }
}
```
for the default 3-column gallery only.
this will ever so slightly change the spacing between the gallery images.
Thread Starter nicallen
(@nicallen)

9 years, 1 month ago

Hi. Thank you, that looks much better. Back to my other threads to make the columns display as a single column instead of 2 images, then 1 underneath in mobile view. Thanks again.

Thread Starter nicallen
(@nicallen)

9 years, 1 month ago

Hi. All sorted.

}
}
@media screen and (max-width: 30em) {

.gallery-columns-3 .gallery-item {
min-width: 100%;
}
}
fixed the image columns.
Happy days…

Thread Starter nicallen
(@nicallen)

9 years, 1 month ago

Hi Me again. I used the code Michael(@alchymyth) supplied which was fine, for only three columns but now I need to use 4, 5, and 6 columns. When I do they space unevenly. I have removed the previous css edit, obviously the gallery has reverted to showing the right margin on the last item. How would the code below be edited to include up to six items. I have removed the css below.

demo at http://www.nicallen.com/hbs/?page_id=132

.gallery-item { margin-right: 4%; padding-right: 0; width: 48%;}
.gallery-item:nth-child( 2n ) { margin-right: 0; }
@media screen and (min-width: 30em) {
.gallery-columns-3 .gallery-item { padding-right: 0; width: 32%; margin-right: 2%; }
.gallery-columns-3 .gallery-item:nth-child( 3n ) { margin-right: 0; }
}
@media screen and (max-width: 30em) {

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

PS I am using a child theme which has the full width page fix applied.

Thanks Best wishes Nick.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Gallery right margin overflow hidden’ is closed to new replies.

Tags