gallery

Hi @selenesolveig

Try the CSS below

.gallery-columns-2 .gallery-item{
display: inline-block;
width: 50%;
padding: 10px 10px;
}

.gallery-columns-3 .gallery-item{
display: inline-block;
width: 33%;
padding: 10px 10px;
}

.gallery-columns-4 .gallery-item{
display: inline-block;
width: 25%;
padding: 10px 10px;
}

.gallery-item img {
border-radius: 8px;
-webkit-box-shadow: 12px 15px 25px -12px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 12px 15px 25px -12px rgba(0, 0, 0, 0.49);
box-shadow: 12px 15px 25px -12px rgba(0, 0, 0, 0.49);
}

Copy and paste this CSS in Appearance -> Customize -> Additional CSS

Regards

Hello,

thanks for your quick reply, it works fine on computer, many thanks.
On phone it aligns on the bottom of the text (description) and not on the top of the pictures. Is it on purpose ?

Hi @selenesolveig,

I am writing few more CSS to help you regarding the responsiveness

.gallery-caption {
font-size: 13px;
font-weight: 400;
}

@media only screen and (max-width: 480px) {

/* Gallery */
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item{
display: inline-block;
width: 50%;
padding: 10px 10px;
}

}

Copy and paste this CSS in Appearance -> Customize -> Additional CSS

Regards

Hello,

thank you again for your great help. It’s far better. Just maybe for later, now on my phone this gallery page is to large to fit.

regards

Cyril

Hi @selenesolveig

This is how your page looks like in my android phone. The above CSS will show only 2 items per row to make it responsive for mobiles

View post on imgur.com

Regards

Hello,

yes, now it looks like yours. Maybe the cache. Thank you for your help.