Jump to content

Summary Block - How to have different "Size/Spacing" from Mobile to Desktop

Recommended Posts

Hello,

Attached below is a screenshot "Web View" of a summary block with products on desktop. They are all tiny because of the spacing parameters I made.

Attached also is "Mobile View" this is how I want the summary block to look on mobile, 2 items in a row.

When I have my desired look on mobile, you can see it gets completely ruined on desktop, how can I have the spacing seperate for mobile and web?

If I make the desktop view look correct, it makes mobile view 1 product across whole screen, which makes it tiring to just scroll by products 1-by-1 on mobile.

Please advise, thank you,

 

https://www.mozerisfineantiques.com/

 

 

 

 

web view.jpg

mobile view.jpeg

Link to comment
On 11/17/2022 at 1:25 PM, Faustas said:

Attached below is a screenshot "Web View" of a summary block with products. If I make the desktop view look correct, it makes mobile view 1 product across whole screen, which makes it tiring to just scroll by products 1-by-1 on mobile.

This can be difficult to manage with Summary Blocks because the size and spacing is set by item width instead of the number of columns that you want to display.

Although it is an additional purchase, I recommend the Lazy Summaries plugin. The author built this to allow a Summary Block to show more than 30 items, but it does far more than this! One excellent feature is that you can set the number of columns and do this independently for desktop, tablet and mobile 🙂

image.thumb.png.35aba6644b312e899d4be4ba97a39767.png

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
  • 1 year later...
On 11/18/2022 at 6:16 AM, paul2009 said:

This can be difficult to manage with Summary Blocks because the size and spacing is set by item width instead of the number of columns that you want to display.

Although it is an additional purchase, I recommend the Lazy Summaries plugin. The author built this to allow a Summary Block to show more than 30 items, but it does far more than this! One excellent feature is that you can set the number of columns and do this independently for desktop, tablet and mobile 🙂

 

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul, if this extends the limit beyond 30, up to how many would it support max?

Link to comment
1 hour ago, elisasunga said:

if this extends the limit beyond 30, up to how many would it support max?

The plugin raises the limit on summary blocks from 30 to 250 items.

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.