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

Force Summary Block to 3 thumbnails per row for mobile

Question

Recommended Posts

  • 0
On 5/22/2020 at 7:10 PM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
body#collection-5be8472a758d463fccbeb164 {
.summary-item-list {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
.summary-item {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: static;
}
}

}

 

Can you let me know how to do this for my page - i don't want the summary wall to stack and resize in mobile version. I want it to look like two columns for the mobile as well.

https://dog-wrasse-bzts.squarespace.com/

 

Share this post


Link to post
  • 0
Posted (edited)
On 5/22/2020 at 2:10 AM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
body#collection-5be8472a758d463fccbeb164 {
.summary-item-list {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
.summary-item {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: static;
}
}

}

 

Hi, I'm also wondering if this code can be applied to my wall summary block. I did input the code into my website (and changed the body#), but there were no changes. Instead, I changed the width to (100%/3) which did shrink the images, but as you can see from the screenshot, it is spaced out. I'm hoping it can display 3 images in 1 row on mobile view. 

Screen Shot 2020-07-03 at 12.24.03 PM.png

Edited by withari

Share this post


Link to post
  • 0
On 7/4/2020 at 2:30 AM, withari said:

Hi, I'm also wondering if this code can be applied to my wall summary block. I did input the code into my website (and changed the body#), but there were no changes. Instead, I changed the width to (100%/3) which did shrink the images, but as you can see from the screenshot, it is spaced out. I'm hoping it can display 3 images in 1 row on mobile view. 

 

Can you share link to page where you use summary block? We can help easier.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
Posted (edited)

Hi there,

I've tried all the solution in these forum but it doesn't work on my end. Same as the OP, I would like to have 3 column for a Summary blocks of product (my version 7.1). I hope you can help me, thank you.

Update:

- I just make the width 333 to make it 3 columns

Edited by squaredsquared
Update

Share this post


Link to post
  • 0
19 hours ago, squaredsquared said:

Hi there,

I've tried all the solution in these forum but it doesn't work on my end. Same as the OP, I would like to have 3 column for a Summary blocks of product (my version 7.1). I hope you can help me, thank you.

Can you share link to page where you use summary block? I can check easier.

 

On 7/6/2020 at 12:06 AM, withari said:

Hi. Have you solved it yet?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
On 7/30/2020 at 7:59 AM, Raendrop said:

hi having issues on mobile

https://balencjuicery.squarespace.com/

under community tag

 

trying to get the wall to look like the first half but then it makes me scroll and has a huge gap.

Can you describe in detail?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


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...