How to fix typography overlap issues on my online store?

Store Design
, , , ,

Topic summary

A user encountered typography overlap issues on their collection and product detail pages (PDP) in their Shopify store. Screenshots were provided showing the overlapping text problem.

Root Cause Identified:

  • Multiple HTML tags contained excessive padding, line height, and margins
  • The body text line-height was set to 1px in the theme customizer, which caused the overlap

Solution Provided:

  • Adjust the line-height setting for body text in the theme customizer
  • Remove unnecessary padding, margins, and line-height values from HTML tags

Resolution:
The issue was successfully resolved after implementing the suggested line-height adjustment. The user confirmed basic coding knowledge and thanked the community for the working solution.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’m facing an issue the typography design on my store suddenly overlaps each other on my collection and PDP page can somebody help resolve this error?

TK1_1-1712298838037.png
TK1_1-1712298838037.png694×561 41.7 KB

TK1_2-1712298951495.png

On footer also!

2

@TK-1

Can you please share a store URL so that I can look into it.

Thanks

3

https://justapparelusa.com/

4

@TK-1

I have reviewed there many HTML tags that have extra padding, line height, margins which needs to remove and everything will refer to the screenshot below. If you have coding idea please do it by your self. Or Do let me know me if you want me to fix that for you.

2024-04-05 11_50_00-Settings.png
2024-04-05 11_50_00-Settings.png590×496 24.7 KB

Thanks

5

Hi @TK-1

Please change the setting line-height of your body text somewhere in your theme customize, you set it is 1px so it caused the issue.

6

Yes I have some basic-level coding understaning

7

Thank you so much it works

1 Like