How can I fix the product title overlap on my product page?

Store Design

Topic summary

Issue: The product title overlaps the product image on the product page (likely on mobile). The original attempt using padding-bottom didn’t resolve it. An image was shared to illustrate the overlap.

Fix provided: Add a CSS media query targeting screens up to 768px that adjusts spacing and positioning:

  • section.product-container.is-flex.is-flex-wrap { margin-top: 7%; }
  • h1.product_name { top: -61px; }

Implementation: The CSS should be added at the bottom of Online Store → Theme → Edit code → Assets → style.scss.liquid.

Explanation: A CSS media query applies styles on smaller screens. Adjusting margin-top increases spacing above the product container, and setting a top value for the product title changes its position to prevent overlap.

Outcome: The change worked perfectly for the requester. Status: Resolved; no further action needed.

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

Hello, can someone please tell me how to fix this overflap of the product title on the product picture ( product page only)

I tried padding-bottom: 10px but nothing changes at all. My store url is 817apparel.com

24B668E9-8A50-431D-818D-E496F4ABFADF.png
24B668E9-8A50-431D-818D-E496F4ABFADF.png1170×2532 347 KB

2

@Only1mrsfragili ,

@media only screen and (max-width: 768px) {
section.product-container.is-flex.is-flex-wrap {
    margin-top: 7%;
}

h1.product_name {
    top: -61px;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

1 Like
3

Thank you so much! It worked perfectly :slightly_smiling_face: