Grid Theme - mobile text overlapping on slider

Technical Q&A
, ,

Topic summary

Issue: On mobile, product slider text in a Shopify Grid theme overlaps into the next product on the homepage.

Proposed fixes:

  • One responder advised adding custom code in theme.liquid (via Online Store > Themes > Edit code) before the tag, sharing a screenshot for navigation but no specific code in the post.
  • Another responder recommended a CSS edit in Assets/theme.css: .product-list-item-title a { white-space: initial !important; }.

Explanation: The CSS white-space property controls text wrapping. Setting it to initial restores normal wrapping behavior, preventing the title/description text from overflowing and overlapping adjacent slider items on mobile.

Outcome: The CSS change in theme.css resolved the issue, confirmed by the requester.

Status: Resolved. No further action requested.

Notes: An image was included to illustrate where to edit code, but the effective solution was the specific CSS update.

Summarized with AI on January 30. AI used: gpt-5.
2

Hello @ResidenceJD ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1678085165552.png
GemPages_0-1678085165552.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team