it’s my pleasure to help us
Topic summary
Main issue: On the Debut theme, the “Image with text overlay” section doesn’t resize properly on mobile.
Key fixes shared:
- Add custom CSS targeting the hero section to make the background image scale (e.g., background-size: contain; set a responsive height like vw; width: 100%).
- Place code in the theme’s main CSS asset (name varies by theme: theme.scss.liquid, theme.css, styles.css, main.css, store.css). If a file isn’t found, use the equivalent CSS file.
- Scope changes with a mobile media query (e.g., max-width: 749px) and/or target specific classes (hero–medium) to avoid shrinking desktop.
- To remove gray bars above/below the image, set .hero background-color: transparent.
Outcomes:
- Original poster confirmed success with the initial CSS. Several others reported success after using media queries or setting transparent backgrounds.
- Ongoing issues reported: gray space still visible, image cropped at bottom, desktop also affected when code isn’t scoped, or code causing permanent mobile-like sizing.
Next steps and support:
- Helpers request store URLs (and passwords if needed) for theme-specific guidance and fine-tuning heights/targets.
- Screenshots provided were important to diagnose gray bar issues.
Status: Partially resolved. No single universal fix; requires theme-specific CSS adjustments and proper breakpoint scoping.
1 Like