sorry
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
I have inserted the correct url. Thank you
1 Like
1 Like
sorry for this issue yes, please add this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.hero {background-color: transparent;}
2 Likes
Show More
Thank you very much for helping me fix it.
Thanks form the future! Huge help!
it’s my pleasure to help us
1 Like
I have the Debut Theme and added the code but nothing changed. My URL is https://bossqueenboutique.com/ Please help!
1 Like
sorry for that issue can you please try this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
#shopify-section-hero .hero--medium {
height: 160px;
background-size: contain;
}
}
1 Like
This worked! Thank you so much!
1 Like
its my pleasure to help us
Hello, I am having the same issue is everyone in this thread. I did find where to paste the code, however that code set it permanently to display in mobile view. Is there a way to have the image change sizes to fit the appropriate user whether they are on mobile or web browser. Thanks in advance.
Same here. I did pasted the code but when I switched to the mobile view mode, the view got a bit weird as there are gray colors on both above and bottom of the pic. Any help from the admins?
Hi Diego apparently I have the same issue described. I have used the code listed but it did’t work on mobile.
website link www.nopineappleonpizza.com
Is there anything else I can do to make it work?
thanks
Hi,
I have tried all the solutions suggested in here and none have worked. I’m having this exact issue: The image I have uploaded into ‘Image with text overlay’ won’t resize at all for the mobile view on debut theme. Is there anything else I can try? It looks awful.