More payment options link is overlapping with my product descriptions - need to increase the space

Store Design
, ,

Topic summary

Issue: After previously reducing the gap between the “Add to cart” button and product description via custom code, newly appearing accelerated checkout elements (“Buy with PayPal” and “More payment options”) began overlapping the first line of the description.

Context: Store uses the Debut theme. A screenshot was provided to illustrate the overlap beneath the button area.

Fix: Add a CSS rule in the assets/theme.scss.css file to increase spacing above the product description element (class: product-single__description) by setting a larger top margin (e.g., margin-top: 50px !important). This creates adequate space between the payment options and the description.

Outcome: The suggested CSS adjustment resolved the overlap; the original poster confirmed it worked.

Status: Resolved. No further action items or open questions were noted.

Summarized with AI on January 27. AI used: gpt-5.
1

Hi there, i had a big space between my ‘add to cart’ button and the start of my product description so i reduced it with code (i can’t find the original message that i followed).

There are now extra payment options ‘buy with Paypal’ and ‘more payment options’ that have appeared below ‘add to cart’ and the ‘more payment options’ link is now overlapping the first line of the description. I therefore need to create some extra space between the 2. See image attached.

Screenshot 2023-05-02 at 19.23.37.png
Screenshot 2023-05-02 at 19.23.37.png2322×1330 394 KB

Can somebody help please?

I am using Debut theme.

thanks

2

Hi @LUYL

You can add below CSS in theme.scss.css file under assets.

.product-single__description {
	margin-top: 50px !important;
}

Thanks

Sheesh B

3

Perfect.

thanks so much Sheesh B