3 column gallery display on mobile

Musil · May 19

Site URL: https://lavender-caribou-csa2.squarespace.com/miami

Hello,

I have been attempting to have three images display on the mobile gallery grid as pictured on the top, but it's currently only displaying two at a time and staggering the third. (As pictured bellow.)

I've used this CSS, but it's not working as intended, it's making the longer banners display at a third of their size.

Quote

@media screen and (max-width:767px) {
.gallery-grid-wrapper {

grid-template-columns: repeat (3,1fr) !important;
}}

Also is there a way to reduce the spacing between a text block, an image block and a gallery block on mobile? The padding is too much.

Thanks in advance!

Edited May 19 by Musil

tuanphan · May 21

#1. Where? I scroll down whole page & Don't see it

#2. Add to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-grid.gallery-grid--layout-grid {
    padding-top: 1vw;
    padding-bottom: 1vw;
}
div#block-yui_3_17_2_1_1651764082623_5918 {
    padding-top: 1vw !important;
}}

Musil · June 9

Hello! And thank you for the help!

I have some further issues that need a little help. I'm having some issues with reducing the padding around a captioned image.

This issue is most obvious on the mobile version

https://lavender-caribou-csa2.squarespace.com/press

Thank you!

tuanphan · June 11

On 6/10/2022 at 1:14 AM, Musil said:

Hello! And thank you for the help!

I have some further issues that need a little help. I'm having some issues with reducing the padding around a captioned image.

This issue is most obvious on the mobile version

https://lavender-caribou-csa2.squarespace.com/press

Thank you!

Use this code

/* Mobile Image padding */
@media screen and (max-width:767px) {
div#page-section-60da3925c5eb7852a11d466a .image-block {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
}

3 column gallery display on mobile

Question

Musil

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Posted Images

3 answers to this question

Recommended Posts

tuanphan

Link to comment

Musil

Link to comment

tuanphan

Link to comment

Create an account or sign in to comment

Support

Community

Developers

Resources