Editing Dawn mobile layout

Store Design
, ,

Topic summary

A Shopify store owner is experiencing a layout issue with the Dawn theme where text in the image banner section overlaps the image on desktop but not on mobile.

Problem Details:

  • Text displays correctly with overlay on desktop version
  • Mobile layout fails to replicate this overlapping effect
  • User seeks CSS code to fix the mobile display

Attempted Solution:

  • User tried a fix that made text go into the background
  • However, this removed the overlay effect present in the desktop version

Current Status:

  • Issue remains unresolved
  • User has shared theme editor links and a screenshot for reference
  • No solutions or responses from other community members yet
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

My text in image banner is not overlapping on mobile layout like it does on desktop. Is there a code I can put in that will fix this?

(Dawn Theme)

2

https://admin.shopify.com/store/thegiftedbabyny/themes/140615155936/editor?category=gid%3A%2F%2Fshopify%2FOnlineStoreThemeSettingsCategory%2FProduct%2Bcards%3Ftheme_id%3D140615155936%26first_setting_id%3Dcard_style

3

When I do that, My text goes into background but without the overlay that is there on desktop version

4

here is edited link

https://admin.shopify.com/store/thegiftedbabyny/themes/140615155936/editor?section=template–17518463287520__image_banner_GeeLfG&category=gid%3A%2F%2Fshopify%2FOnlineStoreThemeSettingsCategory%2FLogo%3Ftheme_id%3D140615155936%26first_setting_id%3Dlogo&customCss=true

5

anon7_0-1711562760444.png
anon7_0-1711562760444.png1366×768 154 KB