Goal: adjust spacing for payment icons on product pages in Dawn—bring icons closer to the “Add to cart” button and add space above the “What/Why We Love” section, matching mobile and desktop layouts. Images were used to show the desired spacing.
Initial fix used CSS (.product-form and .list.list-payment) added in base.css, which worked but also moved footer payment icons. The solution was to scope styles to product-page elements only, e.g., .product__info-wrapper .list-payment__item (padding-bottom) and keep product-form margin-bottom at 0.
To control only the icon row below the button, .product__info-container .list.list-payment received a margin-bottom value. These changes targeted the product page without affecting the footer.
Mobile issue persisted until a missing closing curly brace in the CSS was identified. Adding the brace (and optionally placing the snippet before in theme.liquid) made the mobile spacing apply.
Outcome: spacing is correctly adjusted on product pages for both desktop and mobile, with no impact on footer icons. The thread concluded with the issue resolved.
I think you have missed a closing bracket somewhere. Please try adding a curly brace before the code snippet like this
}
.product-form {
margin-bottom: 0 !important;
}
.product__info-container .list.list-payment {
/* You can adjust this value according to your preference */
margin-bottom: 100px;
}
or pasting this code snippet into theme.liquid file, right before the closing head tag
Hope this will help you resolve your issue!