Size and spacing
Set how big each circle, card, or clip is, the space around the widget, and how the row lines up, on desktop and mobile.
Where to find it: open a widget, click the tab named after its layout (Stories, Carousel, Grid, or Product page), then the Size and spacing card. Pop up widgets have their own size setting instead. See The Pop up layout.
Change the size
Open the widget and click the tab named after its layout.
In the Size and spacing card, change Circle size (Stories), Card width (Carousel), or Strip width (Product page). Grid has no size setting. Set the number of columns instead.
If phones need a different size, type it in Size on mobile. Leave it at 0 to use the desktop size.
Set the Gap between circles, cards, tiles, or clips, and the space above and below the widget.
Click Save. Check the result on your phone, since the preview only shows desktop.
The settings
| Setting | What it does | Range |
|---|---|---|
| Circle size (Stories), Card width (Carousel), Strip width (Product page) | How wide each item is. On the Product page layout, it's the width of each clip. | 70–360 px |
| Size on mobile | The same, on phones. Leave at 0 to use the desktop size. A number from 1 to 69 is raised to 70. | 0–360 px |
| Stretch to fill the row | Carousel only. When there are only a few cards, they grow to fill the full width instead of leaving a gap. | On / Off |
| Gap between circles / cards / tiles / clips | Space between items. | 0–48 px |
| Space above the widget | Space above the widget, including its heading. | 0–80 px |
| Space below the widget | Space below the widget. | 0–80 px |
| Alignment | Where the row sits when it's narrower than the page: Left, Center, or Right. Not on Grid. It has no effect on Product page, where the strip always starts at the left of its column. | |
| Alignment on mobile | The same, on phones. Same as desktop by default. |
Grid has no size setting: tiles are as wide as the columns allow. See Grid columns and pattern.
Defaults by layout
| Stories | Carousel | Grid | Product page | |
|---|---|---|---|---|
| Size | 100 px | 250 px | Set by columns | 220 px per clip |
| Gap | 16 px | 16 px | 32 px | 12 px |
| Space above / below | 20 px | 20 px | 20 px | 20 px |
| Alignment | Center | Center | None | Center |
When you change a widget's layout, sizes you haven't changed switch to the new layout's defaults. Sizes you have changed are kept.
How sizes behave on smaller screens
"Mobile" means screens 749 px wide and narrower.
- Carousel cards are never wider than 85% of the screen, so part of the next card shows.
- Product page clips are capped at 85% of the screen on desktop and 60% on phones.
- Story circles never get smaller than 70 px, even if Size on mobile is set lower.
- On Grid, the gap is capped at 12 px on phones.
The editor preview shows desktop sizes only. Check mobile on your phone or in your browser's mobile view.
Avoid Right alignment on long rows
If a row has more items than fit on screen, Right alignment cuts off the first items and they can't be scrolled back into view. On Stories and Carousel this happens most on phones. On Product page it happens on every screen whenever there are more clips than Clips on screen. Use Left or Center instead. Center is always safe.
Clearing a number field
If you empty a number field and save, it's saved as a fixed fallback, not the layout's default: 100 px for Circle size, Card width, and Strip width, 16 px for a gap, 20 px for the space above and below, and 2 px for ring thickness. Type the number you want instead.