A user seeks to remove excess padding from a pop-up block size chart on their Shopify store, sharing a screenshot showing the spacing issue.
Two solutions provided:
Moeed’s approach: Add custom CSS code to the theme.liquid file (above the </body> tag) to adjust spacing.
GTLOfficial’s approach: Modify section-main-product.css by adding CSS rules targeting .product-popup-modal__button and .product__info-container to reduce minimum height and margins.
Follow-up request:
The original poster asks if the size chart can be displayed on the same line as the “Size” label. Moeed responds that this isn’t possible with CSS alone since they are separate blocks, suggesting a structural limitation.
Status: Partially resolved—padding issue addressed, but inline alignment request remains unresolved without deeper theme modifications.
Hello @Senku
Go to online store ----> themes ----> actions ----> edit code ----> assets —> section-main-product.css
add this code at the end of the file and save.
.product-popup-modal__button {
min-height: 0rem !important;
}
.product__info-container > * + * {
margin: 5px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
