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

Store Design
1

Hello guys,

Can anyone help me remove the padding/margin from above sections on my home page please? Don’t want such a white gap.

thanks in advance!

2

Hey @Tommyboi

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

Casstiel.com :slightly_smiling_face:

4

Hi @Tommyboi ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

@media only screen and (min-width: 769px) {
    .index-section {
        margin: 20px 0 !important;
    }
}
5

thank you! Is there a way to just do this for specific sections?

6

Sure! Please share a screenshot of the section where you want to remove the padding.

7

Tommyboi_0-1737306999877.png
Tommyboi_0-1737306999877.png1239×356 12.9 KB

this one please.

Also is there a way to get these to line up on mobile? (this is on product page)

Tommyboi_1-1737307058693.png
Tommyboi_1-1737307058693.png335×121 2.89 KB

8

Also want to remove padding between title, pricing and variant selector please

Tommyboi_2-1737307209193.png
Tommyboi_2-1737307209193.png673×257 12.4 KB

9

Hi @Tommyboi ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

.promo-grid--space-bottom {
        padding-bottom: 0px !important;
    }

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

ul.sales-points {
    padding: 0px !important;
    margin: 12px 0px !important;
}
}
10

Search for base.css/theme.css/style.css file Add the provided code at the end of the file.- how do i find this in edit code section please?

11

@Tommyboi

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

.promo-grid--space-bottom {
        padding-bottom: 0px !important;
    }

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

ul.sales-points {
    padding: 0px !important;
    margin: 12px 0px !important;
}
}

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

where do i find the base.css please?

13

To find the CSS file in the ‘Edit Code’ section, follow these steps:

  1. Log in to your Shopify admin and go to Online Store > Themes.
  2. Click on Actions > Edit Code next to your active theme.
  3. In the left-hand menu, look for the Assets folder.
  4. Open the Assets folder and search for a file named theme.css, base.css, or styles.css.
  5. Once you find the file, open it and paste the provided CSS code at the end of the file. Then save your change
14

Tommyboi_0-1737308588411.png
Tommyboi_0-1737308588411.png553×846 66.5 KB

is this the correct place?

15

Yes

16

thank you! add to cart button is now too close to variant selector, can i put a small gap in please? Also can i line up sales point with the description of the product? thanks so much for your help!

Tommyboi_0-1737308983398.png
Tommyboi_0-1737308983398.png393×584 26 KB

17

Please mark the solution.

18

can you help me with this last bit please? :slightly_smiling_face:

19

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;
    }
}
20

Yes, please mark these 2 solutions.