@media screen and (max-width: 749px) {
.so-homepage .section-template–{{section.id}} .image-with-text__text-item * {
color: #fff !important;
}
}
please remove this block in image-text.liquid and then use color scheme in setting.
Hope you are doing well.
Topic summary
Mobile text color in an Image with text section stayed white due to custom CSS forcing white in a mobile media query. The store owner wanted black text on mobile while keeping the button label white.
Key actions and guidance:
- Identified custom CSS targeting mobile: a media query (max-width: 749px) with .image-with-text__text-item * { color: #fff !important; }. Advised to remove that block from image-with-text.liquid or switch to theme Color scheme settings.
- Alternative fix: change the specific section’s CSS from #fff to #000 using the section-specific selector. Result: content text successfully turned black.
- To keep the “Shop now” button text white, added CSS: .image-with-text .grid__item .button { color: #fff !important; }.
New issue surfaced: a second Image with text on the homepage still shows incorrect mobile text color. It likely has its own custom CSS (set to #000) and needs to be changed to #fff, but the owner couldn’t locate that section’s CSS. Changing the found rule affects both sections.
Status: First section resolved; second section unresolved. Owner shared collaboration code (3633) and dtimeless.myshopify.com for assistance. Screenshots of code and theme settings are central to the fixes.
