Impulse theme- remove padding from top of section- custom CSS

Store Design

Topic summary

A user seeks help removing excessive white space/padding from sections on their Shopify store using the Impulse theme. The store URL (Casstiel.com) is shared for troubleshooting.

Initial Solution:

  • Custom CSS code is provided to reduce margins between index sections on desktop views
  • Code targets .index-section with media queries for screens wider than 769px

Additional Requests & Refinements:
The user requests multiple spacing adjustments with accompanying screenshots:

  • Remove padding from a specific promo grid section
  • Align sales points on mobile product pages
  • Reduce spacing between product title, pricing, and variant selector
  • Adjust gap between variant selector and add-to-cart button

Technical Guidance:

  • All CSS modifications are added to the theme’s base.css/theme.css file via Online Store > Themes > Edit Code > Assets folder
  • Multiple code snippets provided using !important declarations and media queries for responsive adjustments
  • Final solution involves replacing initial code blocks to fine-tune margins (15px for variant selector, 5px for price/header)

Outcome:
The issue appears resolved through iterative CSS adjustments, with the user expressing gratitude for the detailed assistance.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
21

@Tommyboi
Please remove this code

.product-block.product-block--sales-point {
    display: flex !important;
    padding: 0px !important;
    margin: 5px 31% !important;
    white-space: nowrap !important;
}

.product-block.product-block--price,
div[data-dynamic-variants-enabled],
.product-block.product-block--header {
    margin-bottom: 5px !important;
}

replace with

div[data-dynamic-variants-enabled] {
    margin-bottom: 15px !important;
}

.product-block.product-block--price, .product-block.product-block--header {
    margin-bottom: 5px !important;
}

@media (max-width: 768px) {
    .product-block.product-block--sales-point {
        display: flex !important;
        padding: 0px !important;
        margin: 5px 0% !important;
        white-space: nowrap !important;
    }
}
22

thank you! Just need a little more gap with add to cart button, which number in that code do i amend to edit this please?

Tommyboi_0-1737309969923.png
Tommyboi_0-1737309969923.png358×583 25.8 KB

23 
div[data-dynamic-variants-enabled] { 
  margin-bottom: 15px !important; /* added this number 15 */
}
24

perfect thank you! what number do I need to edit for less gap between pricing and variant selectors? want to move it closer to pricing just a little bit :slightly_smiling_face:

Tommyboi_0-1737310499156.png
Tommyboi_0-1737310499156.png362×308 11.1 KB

25

This one pricing and title

.product-block.product-block--price, .product-block.product-block--header {
    margin-bottom: 5px !important;
}
26

the margin- bottom? up or down?

27

Margin-top: 0px !important; /* added this number 0 /
Margin-bottom: 0px !important; / added this number 0 */

28

thank you so much for your help!