Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Make gallery 3 columns on mobile view for Squarespace 7.1


18250907

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

  • 0
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,.

IMG_0101.PNG

Link to post
  • 0
On 2/24/2021 at 4:13 PM, 18250907 said:

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

IMG_0101.PNG

It looks like you solved this?

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

image.thumb.png.f6af46cb3b35778524d9fd80e13b23f5.png

Link to post
  • 0
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?

image.thumb.png.f6af46cb3b35778524d9fd80e13b23f5.png

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 

Link to post
  • 0
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

Link to post
  • 0
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!

Link to post
  • 0
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;
}
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...