Product page, Description text in overlapping with more payments methods

Store Design

Topic summary

Main issue: On a Shopify product page, the description text overlapped the “More payment methods” section. A screenshot illustrated the overlap, and the store link was provided after removing the password for access.

Context: Store URL shared (helltote.de product page). Access was initially restricted but then opened for troubleshooting.

Solution (CSS fix): Add a top margin to the first child within the rich text area to prevent overlap.

  • Steps: Online Store → Theme → Edit code → open theme.liquid → paste a block before the closing tag.
  • CSS used: .rte > *:first-child { margin-top: 49px !important; }
  • Explanation: .rte targets the product description’s rich text content; adding margin creates spacing above the first element.

Outcome: The change resolved the overlap. The original poster confirmed it worked and was asked to like/accept the solution.

Status: Resolved; no further questions pending.

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

Hi, i have a problem of overlapping

How can i solve it?

Nick_Chatz_0-1703260152641.png
Nick_Chatz_0-1703260152641.png740Ă—351 23.9 KB

2

Hello @Nick_Chatz
can you share store URL?

3

https://helltote.de/products/ecogance-tote-recycled-material-tote-bag

4

Hello @Nick_Chatz please share password

5

sorry, i removed it. You can access now

6

Hello @Nick_Chatz

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.rte>*:first-child { margin-top: 49px !important; }
7

thanks a lot it worked

8

Hello @Nick_Chatz
my solution worked then please do like and accept solution.

1 Like