Hi. I have just changed the image with text overlay on my home page. It is looking perfect on the desktop view; however the text is getting cutoff on the mobile version. Can someone please help me with this and let me know exactly what I need to do to fix it? My website address is www.alignyourvibe.com.au. Thank you!
Topic summary
Issue: On the Debut theme home page, the “Image with Text Overlay” looks correct on desktop but the text is cut off on mobile.
Cause: The uploaded image itself contains embedded text. On mobile, responsive cropping scales/trims the image, so text baked into the image cannot reflow or resize and gets cut off.
Suggested fixes:
- If keeping text inside the image, switch to the Slideshow section, which handles images with embedded text more reliably across devices.
- If using the Image with Text Overlay section, upload an image without text and add the overlay text via the theme’s text fields, allowing Shopify to adjust layout and typography for desktop and mobile automatically.
Status: Guidance provided; no confirmation of resolution yet. No code changes shared or required.
Hey @AlignYourVibe You have used a image that contains text in it. So if you are planning to use these images then you can go with slideshow section and that will works well here.
If you want to use Image With Text Overlay section then try to write text manually don’t use the image that already have text in it, so in this way shopify theme will automatically adjust the text and image for desktop and mobile itself. You don’t need to have concern about it.
Hope it helps you!