How To Align All This Size Boxes Perfectly, Right Now Someone Is Broad And Some Is Not, I want it to fix that.
Topic summary
A user is experiencing inconsistent widths in size selection boxes on their product page, with some boxes appearing broader than others.
Proposed Solution:
Another user suggests the width variation is caused by differing text lengths in the size labels. They recommend:
- Restructuring the layout to display 3 boxes per row
- Adding CSS code to standardize the appearance:
.block-swatch-list { justify-content: center; }.block__swatch-item { min-width: 90px; }
The CSS should be added to the end of the theme’s CSS file. This approach would create uniform box widths and center-align the size options for a cleaner, more consistent appearance.
@Emiway - it depends on the amount of text, so if you like then you can make 3 boxes in a row and make it like this screenshot, if you find it ok then you can add this css to the very end of your theme.css file and check
.block-swatch__item{min-width: 90px;}
.block-swatch-list{justify-content: center;}
