Remove gap between sections - Impact theme

Store Design
1

Hello everyone one,

I have on my product page a gap between my add to cart button section and my accordion section. I would like to remove the space to make it looks more compact .

can someone help me to generate a css code to help me with this please

thanks

IMG_4057.jpeg
IMG_4057.jpeg1283×1948 115 KB

2

Hi @Transcolie ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_1-1717466097721.png
BSSTechVenture_1-1717466097721.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_2-1717466108061.png
BSSTechVenture_2-1717466108061.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (max-width: 767px) {
    .shopify-section.shopify-section--main-product > .section {
        padding-bottom: 0 !important;
    }   
}

Here is result:

BSSTechVenture_0-1717466025256.png
BSSTechVenture_0-1717466025256.png640×901 50.5 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Thanks

it helps a lot and it works :slightly_smiling_face:

4

Hi @Transcolie ,
We’re happy to see that our suggestion helped you solve the issue.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Thanks in advance :heart_eyes: