(Squarespace) Show Images in Gallery in same line

To make Images in Gallery in the Same Line, you can follow these.

#1. First, find Gallery Section ID.

In my example, it is: section[data-section-id=”67bd2229d6865e7a07a5a703″]

#2 . Next, use this code to Custom CSS

section[data-section-id="67bd2229d6865e7a07a5a703"] .gallery-grid-wrapper {
    grid-template-columns:repeat(8,1fr) !important;
    grid-gap: 0px 0px !important;
}

Note: If Gallery has 8 images, use number 8 in the code. If the Gallery has 20 images, use number 20.

Result

image

#3. If you want to apply this on mobile only, use this CSS code.

@media screen and (max-width:767px) {
section[data-section-id="67bd2229d6865e7a07a5a703"] .gallery-grid-wrapper {
    grid-template-columns:repeat(8,1fr) !important;
    grid-gap: 0px 0px !important;
}
}

Result

#4. If you want to make it on Desktop only, use this CSS code

@media screen and (min-width:768px) {
id="67bd2229d6865e7a07a5a703"] .gallery-grid-wrapper {
    grid-template-columns:repeat(8,1fr) !important;
    grid-gap: 0px 0px !important;
}}

1 Like

@tuanphan,

:heart: :heart: :heart: