remove gap between 'icon with text' blocks product page

Store Design
, , ,

Topic summary

A user seeks to reduce excessive vertical spacing between icon-with-text blocks on their product page (Dawn theme, alexandrawestbrook.com).

Problem: Large gaps appear between icon elements, as shown in the provided screenshot.

Solution provided:

  • Add custom CSS to the end of the base.css file
  • The code targets .icon-with-text__item elements and reduces bottom margin to 8px
  • Also adjusts spacing for product info container elements to 1.5rem
  • A before/after screenshot demonstrates the reduced spacing

Status: Solution offered but not yet confirmed as implemented or tested by the original poster.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

hello, i want to reduce the gap of my icon with text on my product page, as there is currently a big gap:

Screenshot 2025-04-25 at 16.41.28.png
Screenshot 2025-04-25 at 16.41.28.png981×335 11.1 KB

website is www.alexandrawestbrook.com , theme is dawn

2

Paste the following code in the end of base.css file.

li.icon-with-text__item {
    margin-bottom: 8px !important;
}
.product__info-container .product-form, .product__info-container .product__description, .product__info-container .icon-with-text {
    margin: 1.5rem 0 !important;
}

Results:

thescriptflow_0-1745597076892.png
thescriptflow_0-1745597076892.png541×673 27.4 KB