My image with text color cannot change color under mobile view, can anyone help. My current color is white, I want to change to black. The code of the image-with-text.liquid file has been modified before, so it is forced to display only white color text.
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.
Hi, @clementjaw001
Could you please share your store url?
@clementjaw001 using css the color can be changed, can you please share the website link?
Sure, url: dtimelesscustomgift.com
I enclosed the image to text code for your review.
@clementjaw001 - which section? can you give screenshot of it?
Image with text under menu, slider section. www.dtimelesscustomgift.com, home page.
@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.
@clementjaw001 - I see it like this, you have added custom css already in css section, you need to make css fff as 000 so it becomes
@media screen and (max-width: 749px) {
.so-homepage .section-template--18230638575866__bc896c5e-7dc0-4f00-8ebc-f071442f307e .image-with-text__text-item * {
color: #000 !important;
}
}
Hi Suyash,
Can advise where can I change this css?
@clementjaw001 - I think it will be in that particular section if you open it in customize settings, if you find it difficult then I can check it for you, I will need collab code to send request for collaboration
It work, I manage to change the text for the content color to black. Wonder The “shop now” text can retain in white color?
@clementjaw001 - add this css
.image-with-text .grid__item .button{color: #fff !important;}
It work also! Really great. Wonder can you help me to check for another image with text also?
Also on the front page, mobile view text color cannot change. I want the content text to change to white color for this section. The text color inside the button remain white.
@clementjaw001 - this section also has custom css added to it, where it has css #000 color, make it #fff and check, same like previous section in customize settings
I cannot find this section to change the text color to white, only manage to change the first image with text color to black, can you help me to change? Collab code is 3633. url : dtimeless.myshopify.com
