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

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/

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 🙂

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