3 column gallery display on mobile

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!

#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;
}}

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!

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;
}
}