Hi! I’d like the inner spacing to stay contained within the square. When I add longer text — for example, instead of “S” I use “XXL” — the size label overlaps and spills outside of the square. Can someone help me make the padding adjust automatically based on the content inside? Thanks!
Topic summary
Issue: Size labels (e.g., “XXL”) overflow the square size tag in the Dawn theme; requester wants the inner spacing to remain contained and adjust automatically to the content.
Key proposals:
- Flexbox + fluid sizing: Use a flex container with centered alignment and replace fixed dimensions with min-width/min-height so the box can grow slightly to fit longer text.
- Centered, no-wrap label: Style .card__swatch-item with padding, display:flex, align/justify center, line-height, and white-space: nowrap to keep text on one line inside the box. Sample HTML/CSS was provided.
- Fixed square: Use aspect-ratio to force a true square and prevent text from pushing the container outward.
- Quick theme setting CSS: In Theme Settings > Custom CSS, set .card__swatch .card__swatch-item { width: auto !important; padding: 4px 8px !important; } to let the box size to content.
Implementation guidance:
- Add the snippet where the class product-card-new–wrapper appears, or use the Theme Settings’ Custom CSS.
Materials: Screenshots and a live collection URL were shared for context.
Status: No confirmation of a working fix yet; discussion remains open.
1 Like
Hi! Totally get the frustration—no one likes messy layouts. To fix this, you can set the container to use flexbox with centered alignment and apply min-width and min-height instead of fixed dimensions. This way, the box will expand slightly to fit longer text like “XXL” without breaking the layout. Want help tweaking the CSS? Happy to take a quick look!
Try this code.
<div class="card__swatch">
<div class="card__swatch-item">
LLLLLL
</div>
</div>
.card__swatch-item {
padding: 6px 12px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.2;
}
Best regards,
Devcoder 
Where do I put the first code, on the main collection product grid liquid?
1 Like
Search for this class — product-card-new--wrapper — and add the code in the file where you find it. If you can’t find it, send me the Collaborate code and I’ll do it for you.
Best regards,
Devcoder
1 Like
You can force the size tag to behave like a true square by using aspect-ratio and preventing the text from pushing the container outward.
1 Like
