How can I fix overlapping product images on mobile display?

Topic summary

Mobile product images and product names are overlapping on a Shopify store. The helper first suggested confirming the issue on a real device and requested the store URL.

Resolution for original poster: A CSS fix was provided with instructions to add a snippet in theme.liquid (Shopify’s main layout template) just above the tag. After applying it, the original poster confirmed the overlap was resolved. A screenshot was central to illustrating the issue.

Follow-on report: Another user reported the same overlap in a product image carousel (image slider) and stated the provided fix did not change the layout. They shared a screenshot and provided their site URL for review; the helper asked for the link and it was supplied.

Status:

  • Original issue: Resolved via CSS in theme.liquid.
  • New, similar case: Unresolved; awaiting tailored review of the provided site.

Notes/terms:

  • CSS: styling rules that control layout.
  • theme.liquid: the theme’s main template file where global code can be added.
  • Carousel: rotating slider for product images.
Summarized with AI on December 12. AI used: gpt-5.

yessir. it worked. thanks alot