Make gallery 3 columns on mobile view for Squarespace 7.1

Site URL: https://www.themeaningwell.com/

On desktop the gallery is 3 columns here, but in mobile view it becomes 2 columns. Is there a code I can place in the CSS to make it three columns in mobile just like in the desktop view?

Thanks so much for any help.

I see 3 columns on mobile here. Did you solve this?

On 2/19/2021 at 12:08 PM, tuanphan said:

I see 3 columns on mobile here. Did you solve this?

No, it still show as two columns on mobile, please see attached. Thanks,.

On 2/24/2021 at 4:13 PM, 18250907 said:

No, it still show as two columns on mobile, please see attached. Thanks,.

It looks like you solved this?

Also do you want to add space between site title - cart icon?

On 3/1/2021 at 9:22 PM, tuanphan said:

It looks like you solved this?

Also do you want to add space between site title - cart icon?

I see.. I don't know why it still shows as two columns on iphones. 
If I can put space between logo and cart that would be great, thank you so much in advance 

On 3/9/2021 at 12:57 PM, 18250907 said:

I see.. I don't know why it still shows as two columns on iphones. 
If I can put space between logo and cart that would be great, thank you so much in advance 

Ah, sorry for the delay. Just checked again. This is not possible.

But if we use code to change masonry to grid on mobile, we can set 3 items/row. Do you want to change to grid on mobile? We will give the code

On 3/20/2021 at 2:18 PM, tuanphan said:

Ah, sorry for the delay. Just checked again. This is not possible.

But if we use code to change masonry to grid on mobile, we can set 3 items/row. Do you want to change to grid on mobile? We will give the code

Yes! Code will be great!

On 3/22/2021 at 4:29 PM, 18250907 said:

Yes! Code will be great!

Try adding to Design > Custom CSS

/* Masonry to grid mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

On 3/24/2021 at 7:00 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Masonry to grid mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

 

Hi @tuanphan I just found this thread while researching how to make my masonry gallery appear as 3 rows on mobile. I implemented this code, and this is the closest I've gotten to achieving the look I am going for. However, there is still a large vertical gap between the horizontal and vertical images. I am also thinking that the images in the left and right columns are being cut off. I have attached a screenshot below. I would appreciate your help if you are willing! 

Here is the link to the website:
https://www.bucketagency.com/our-work/columbia-regional-airport
PW: demo

And the code I applied

@media @mobile {
  .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

On 2/16/2022 at 4:08 AM, courtneynowlin said:

Hi @tuanphan I just found this thread while researching how to make my masonry gallery appear as 3 rows on mobile. I implemented this code, and this is the closest I've gotten to achieving the look I am going for. However, there is still a large vertical gap between the horizontal and vertical images. I am also thinking that the images in the left and right columns are being cut off. I have attached a screenshot below. I would appreciate your help if you are willing! 

Here is the link to the website:
https://www.bucketagency.com/our-work/columbia-regional-airport
PW: demo

And the code I applied

@media @mobile {
  .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

 

It looks like you removed it on mobile. Do you still need help?

@tuanphan Hi! I've been trying to do the same, with showing figcaption, but the caption is going to the wrong column. Code is on row 183 (as of right now, but shouldn't change too much)

 https://gold-cheetah-exh9.squarespace.com/home
PW: Geheim123

How do I get the caption to stick to the bottom middle picture?

19 hours ago, joannfotografie said:

@tuanphan Hi! I've been trying to do the same, with showing figcaption, but the caption is going to the wrong column. Code is on row 183 (as of right now, but shouldn't change too much)

 https://gold-cheetah-exh9.squarespace.com/home
PW: Geheim123

How do I get the caption to stick to the bottom middle picture?

In your screenshot, I see it already on bottom middle. Can you explain clearly?

On 4/24/2022 at 9:53 AM, tuanphan said:

In your screenshot, I see it already on bottom middle. Can you explain clearly?

@tuanphan yes of course! I've attached a new screenshot. The title / figcaption belongs to the picture in the middle column bottom picture, but it is in the column on the right  

On 4/27/2022 at 1:25 AM, joannfotografie said:

@tuanphan yes of course! I've attached a new screenshot. The title / figcaption belongs to the picture in the middle column bottom picture, but it is in the column on the right  

Try adding this to Design > Custom CSS

/* Fix masonry caption mobile */
@media screen and (max-width:767px) {
body#collection-619645a0b14d634e6f06c56c figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute;
    bottom: 0;
    width: calc(~"100% - 6px");
    left: 50%;
    transform: translateX(-50%);
}}

On 4/29/2022 at 11:25 AM, tuanphan said:

Try adding this to Design > Custom CSS

/* Fix masonry caption mobile */
@media screen and (max-width:767px) {
body#collection-619645a0b14d634e6f06c56c figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute;
    bottom: 0;
    width: calc(~"100% - 6px");
    left: 50%;
    transform: translateX(-50%);
}}

 

@tuanphan hi again, i tried doing this, but there is still a piece hanging. also the text is going over the images instead of staying below it. maybe what i want is not possible, that is okay haha then i'll change it back to 2 columns