Force Summary Block to 3 thumbnails per row for mobile

Yes, here is the link: frog-cylinder-fs7r.squarespace.com 

The "summary list" that I am using is on the first section underneath the hero. It is the award badge circle images.

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/

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. 

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.

Hi @tuanphan - here is my link: https://www.withari.com/all-travel

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

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 @tuanphan - here is my link: https://www.withari.com/all-travel

Hi. Have you solved it yet?

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.

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?

I'm working on the same model and trying to create a travel campaign in my Squarespace blog. Did you get the solution of it? Let me know if you get.

For the Summary block, I would like to use carousel view - but display 3 items per row in desktop view & 1 item per row in mobile.

I am using Brine.

@tuanphan, pls can you help.

On 7/18/2020 at 3:23 PM, tuanphan said:

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

 

Hi. Have you solved it yet?

For the Summary block, I would like to use carousel view - but display 3 items per row in desktop view & 1 item per row in mobile.

I am using Brine.

@tuanphan, pls can you help.

On 10/6/2020 at 1:11 AM, deeptivd said:

For the Summary block, I would like to use carousel view - but display 3 items per row in desktop view & 1 item per row in mobile.

I am using Brine.

@tuanphan, pls can you help.

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

This is still under development & the page is unlinked. Not sure if you can access this - https://fish-parakeet-n2zk.squarespace.com/new-one/#/new-page-1

On 10/7/2020 at 4:29 PM, deeptivd said:

This is still under development & the page is unlinked. Not sure if you can access this - https://fish-parakeet-n2zk.squarespace.com/new-one/#/new-page-1

You can add 2 summary with 3 items - 1 item. Then we will give the code to hide 1 summary on desktop, hide 1 on mobile

On 12/19/2019 at 7:23 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 50% !important;
    position: static;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
}

 

Hi there, 

I used this code to force summary in 2 columns for row in mobile view.

How can I add have a margin between the images?

This is my page: https://www.dezendezen.com/archive-sale

Thank you very much :)

On 10/8/2020 at 7:04 AM, tuanphan said:

You can add 2 summary with 3 items - 1 item. Then we will give the code to hide 1 summary on desktop, hide 1 on mobile

Hi @tuanphan,

I'm hoping you can help me with a similar question. The URL is https://lifefromtheplaypen.com/shop I would like three images in the summary grid simple to appear on desktop and two to appear in the summary grid on mobile. I've created two different summary grids but am unsure of how to target each summary grid to hide one on desktop and one on mobile.

Thanks in advance!

On 11/26/2020 at 10:29 AM, AshIzsak said:

Hi @tuanphan,

 

I'm hoping you can help me with a similar question. The URL is https://lifefromtheplaypen.com/shop I would like three images in the summary grid simple to appear on desktop and two to appear in the summary grid on mobile. I've created two different summary grids but am unsure of how to target each summary grid to hide one on desktop and one on mobile.

Thanks in advance!

Do you still need help on this?

Hi @tuanphan I would like some help getting this page to show my 3 icons all together on one row in mobile as it's showing in desktop. I tried one of the codes you sent but it didn't work for me. Appreciate any help! 

https://www.tarynco.com/mc-apop-1

On 2/23/2022 at 3:06 AM, mary2 said:

Hi @tuanphan I would like some help getting this page to show my 3 icons all together on one row in mobile as it's showing in desktop. I tried one of the codes you sent but it didn't work for me. Appreciate any help! 

https://www.tarynco.com/mc-apop-1

The url doesn't exist. Can you check it again?

On 12/19/2019 at 1:23 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 33% !important;
    position: static;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
}

hey @tuanphan is there a way to force 5 per row mobile?  I tried adjusting your code with no luck 😕. www.tlastmarks.com/nursery password: Devon   there is a summary block in the footer which I'd like to appear more consolidated on one line mobile, rather than stacked.  I can't figure it out.  What do you think?

6 hours ago, DevonHarris said:

 

try 33% to 20%

17 hours ago, tuanphan said:

try 33% to 20%

Hey @tuanphan unfortunately this didn't work 😕.  not having much luck...www.tlastmarks.com/nursery in footer section PW is: Devon

On 8/12/2022 at 9:32 AM, DevonHarris said:

Hey @tuanphan unfortunately this didn't work 😕.  not having much luck...www.tlastmarks.com/nursery in footer section PW is: Devon

This section?

Hey @tuanphan 
I have a summary block set to carousel mode on desktop and would like to increase the number of items per row from it's current max of 5 to somewhere around 8-10 items. Is this possible?

URL: http://oilandstone.co
PW: oilandstone