junger 50 Share Posted December 19, 2019 I am looking for a way to force summary blocks to display 3 thumbnails per row along with their excerpt for mobile screens. Does someone know how to accomplish this? I have the summary block on the page below: https://www.dothingsnyc.com/journal Thanks, Josh Link to post
0 Bel_SquareSpace 3 Share Posted June 27, 2020 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/ Link to post
0 withari 0 Share Posted July 3, 2020 (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. Edited July 3, 2020 by withari Link to post
0 tuanphan 9,300 Share Posted July 5, 2020 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 Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum. Link to post
0 withari 0 Share Posted July 5, 2020 Hi @tuanphan - here is my link: https://www.withari.com/all-travel Link to post
0 squaredsquared 0 Share Posted July 17, 2020 (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 July 21, 2020 by squaredsquared Update Link to post
0 tuanphan 9,300 Share Posted July 18, 2020 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? You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum. Link to post
0 Raendrop 0 Share Posted July 30, 2020 (edited) 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. Edited July 30, 2020 by Raendrop Link to post
0 tuanphan 9,300 Share Posted August 3, 2020 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 Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum. Link to post
0 kolsafr44 0 Share Posted September 10, 2020 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. Link to post
0 deeptivd 0 Share Posted October 5, 2020 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. Link to post
0 deeptivd 0 Share Posted October 5, 2020 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. Link to post
0 tuanphan 9,300 Share Posted October 7, 2020 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. You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum. Link to post
0 deeptivd 0 Share Posted October 7, 2020 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 Link to post
0 tuanphan 9,300 Share Posted October 8, 2020 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 You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum. Link to post
0 Michele_Dezen 0 Share Posted October 20, 2020 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 :) Link to post
0 AshIzsak 0 Share Posted November 26, 2020 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! Link to post
0 tuanphan 9,300 Share Posted December 3, 2020 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? You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum. Link to post
Question
junger 50
I am looking for a way to force summary blocks to display 3 thumbnails per row along with their excerpt for mobile screens.
Does someone know how to accomplish this?
I have the summary block on the page below:
https://www.dothingsnyc.com/journal
Thanks,
Josh
Link to post
Top Posters For This Question
15
6
4
3
Popular Days
Jan 13
8
May 17
3
May 8
2
May 22
2
Top Posters For This Question
tuanphan 15 posts
JonJonJon 6 posts
sarahlavie 4 posts
deeptivd 3 posts
Popular Days
Jan 13 2020
8 posts
May 17 2020
3 posts
May 8 2020
2 posts
May 22 2020
2 posts
Popular Posts
tuanphan
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
JonJonJon
@LJSpace Came up with a solution that will keep your website quick, if you haven't gone for the plugin: .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 .sqs-gallery-des
Posted Images
42 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment