Debut Theme - Landing Page Image with text overlay - mobile

Topic summary

Main issue: Landing page image with text overlay in the Debut theme doesn’t fit on mobile; a suggested code change fixes mobile but makes the desktop image too small.

Context: Screenshots were shared to illustrate the misalignment and scaling problems on mobile vs. desktop. Images are central for understanding the visual issue.

Proposed solutions:

  • Implement theme code changes to allow separate image inputs for desktop and mobile, enabling responsive control without shrinking desktop.
  • Follow a provided JSFiddle example as a guide for CSS/HTML structure to handle responsive background images and text overlays.

Technical notes:

  • Debut (Shopify theme) uses responsive design; hero/landing images with text overlays often need media queries or separate assets per breakpoint.
  • “Text overlay” refers to text rendered on top of an image, which can require distinct styling for mobile.

Status: No confirmed fix or decision yet. Action items include trying the JSFiddle approach or custom coding to add separate desktop/mobile image fields. Discussion remains open.

Summarized with AI on February 4. AI used: gpt-5.

Hi,

I’m just trying to change my image on the landing page, but it doesn’t fit at all for mobile :disappointed_face:
If I add this code section many of you say, it’s changes on desktop version (too small for desktop then)..

Does anybody know what to do :(?

Thank you so much

Hi Chumani,

This requests some coding changes. We can help you with having two places to add image: one will be for desktop and the other for mobile. You can write us at wesurepro@gmail.com and we’ll help you with the changes.

Will be waiting for your email.

Kindest regards,

Vjosa

@chumani

Try follow this example

https://jsfiddle.net/omarjuvera/2raxtxqr/15/