Why are my product page contents overlapping?

Technical Q&A

AI-generated summary

Main issue: Pricing and product images were overlapping, affecting the homepage and product pages under “Shop,” with product pages also overlapping the footer.

Recent actions:

  • The helper requested the store URL via private message.
  • A CSS fix was provided to add margin-top: 90px to a specific anchor element class in theme.min.css, which resolved the homepage layout issue.
  • A second CSS adjustment was suggested for the product page, adding margin-top: 140px to a grid container class to address the footer overlap.

Technical notes:

  • CSS (Cascading Style Sheets) rules were added to theme.min.css, the site’s minified stylesheet, to increase spacing via the margin-top property.
  • The targeted selectors appear to be utility/Tailwind-like class chains, indicating style overrides for specific UI components.
  • The provided code snippets are central to the fix.

Outcome/status:

  • Homepage fixed; product page fix proposed. The user expressed thanks, but no explicit confirmation of the product page resolution, so the thread appears partially resolved and potentially still open for final verification.
1

Hello!

I’ve noticed that pricing and pictures are overlapping on our product page - prices of each item are shifted down (both on home page and also all product pages under shop). Not sure how to describe this well but kindly let me know if someone knows an answer to this. Thank you so much!

Screen Shot 2022-03-07 at 8.26.50 PM.png
Screen Shot 2022-03-07 at 8.26.50 PM.png1018×626 65.2 KB

2

@kellie1
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

3

Just messaged you! Thank you!!

4 
a.inline-block.hover\:text-primary-accent.text-base.items-center.justify-center.border-b-text.border-primary-text.hover\:border-primary-accent.pb-1 {
    margin-top: 90px !important;
}

@kellie1 Add this code in the bottom of the theme.min.css file

5

Wow! Thank you! It solved the layout on my homepage, but it seems like my product page within “shop” is still overlapping with footer. Is there any chance you could help with this as well?

6 
.grid.lg\:grid-cols-12.bg-border.gap-gutter {
    margin-top: 140px !important;
}

@kellie1
try this code.

7

Thank you!!