Headline and subheadline on a slider banner did not appear on mobile, and the user wanted the blue headline changed to white and the text moved toward center-left. After sharing preview URLs, one responder noted that, by default, text may display below the image on mobile and cautioned against overlaying text due to poor color contrast.
Solution path:
Custom CSS/JS was added to the theme.liquid (Shopify’s main layout file) above the closing to make the headline/subheadline visible on mobile, change text color to white, and adjust positioning.
Iterations addressed: mobile visibility issues, vertical alignment (from “middle up” to true middle center), and spacing between headline and subheadline.
Outcome:
Banner text now appears on both desktop and mobile, centered and white. The user confirmed it works.
A subsequent issue where some menu items became unclickable was fixed by additional code changes in theme.liquid.
Notes:
Code snippets and screenshots were central to the solution; images showed desktop and mobile results.
One participant advised reconsidering text-over-image because color contrast/readability may be poor.
@v10plus - you can use code given by @David_SHT - but I do not recommend text on image if you are using these banners as colors do not look that good.. please change colors too