Image Header Covering Price on Mobile

Shopify Discussion

Topic summary

Mobile product page issue where the product name overlapped the price on small screens. Root cause suspected to be CSS/responsive behavior.

Key steps and suggestions:

  • Store URL was provided for review.
  • A quick CSS fix was suggested: set #ProductPrice { opacity: 1 !important; }. The change didn’t resolve the overlap, and one respondent couldn’t see the code applied.
  • Broader guidance recommended checking mobile-specific CSS (media queries) and layout rules (Flexbox/Grid) to ensure elements wrap/resize correctly.

Outcome:

  • The display issue was ultimately resolved by the original poster (no specific solution detailed).
  • A new concern was raised: site loading speed feels slower than desired. No diagnostics or solutions for performance were provided yet.

Status:

  • Original overlap problem: resolved.
  • Performance (page speed) concern: open, no agreed actions or fixes in thread.
Summarized with AI on December 12. AI used: gpt-5.
1

Hi everyone,

I hope I can get some help on this. My website has an issue whenever one views the website on their mobile.

The price of the item is being covered by the product name in the product page.

I wonder what is the cause of it and are there any ways to resolve this issue?

Thanks in advance :folded_hands:t2: :folded_hands:t2:

1 Like
2

Hey @jxshpfy

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

yes sure!

here’s the website url: https://stolenstolen.com/

4

Hi @jxshpfy

To solve the issue, please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

#ProductPrice { opacity: 1 !important; }
5

Hi,

I’ve tried, the issue still persists.

6

Hi @jxshpfy

I cannot see the code added. Did you click Save button after adding code?

7

Hi,

Yes I did.

8

The issue of the product name covering the price on your mobile website is likely due to CSS styling conflicts or responsive design issues. When viewing on mobile, the layout may not be adjusting properly to fit the screen, which causes the text elements to overlap.

To resolve this:

  1. Check the CSS for Mobile Responsiveness: Ensure that the product page has appropriate media queries to adjust layout elements based on screen size.
  2. Adjust the Flexbox or Grid: If you’re using Flexbox or CSS Grid, ensure that the items are wrapping or resizing correctly for mobile screens. Read It For More Information
9

Hi everyone,

Thanks for all the help!! Managed to resolve the issue!!

But the website loading speed is slower than what I’d like, not sure what’s causing it.