Hello,
The variants text colors are black on black background on mobile device, so it’s not visible.
How to I modify this, my theme is Debut Theme.
Please see the screenshot.
Topic summary
A Shopify store owner using the Debut theme reports that product variant text appears black on a black background on mobile devices, making it invisible to customers.
Initial Solution Attempt:
- A helper provided CSS code to be added to
theme.scss.cssusing a media query targeting screens with minimum width of 768px - The code changes the variant selector text color to red
Complications:
- The store owner has
theme.scss.liquidinstead oftheme.scss.css - The initial fix only worked on desktop, not mobile devices
- The 768px min-width media query was identified as the likely issue
Revised Solution:
- Updated CSS code provided using
@media (max-width: 768px)instead of min-width - This targets smaller screens (mobile devices) specifically
Current Status:
- Partially resolved: One variant option now displays correctly
- Issue persists on at least one other product variant selector
- Store owner provided specific product URLs and screenshots showing remaining visibility problems
1 Like
Hello @neonfactory , when I view on mobile, I still see text show normal: https://prnt.sc/r3bIeWiWqnJy
you can check my image
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > theme.scss.css and paste this at the bottom of the file:
@media (min-width: 768px){
select#SingleOptionSelector-0 {
color: red!important;
}
}
I do not have theme.scss.css
I have theme.scss.liquid
I have edited the file I have theme.scss.liquid but It’s change the color on desktop but not on my phone.
Is it about this : min-width: 768px ?
Can we modify it for all the device?
1 Like
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > theme.scss.css and paste this at the bottom of the file:
@media (max-width: 768px){
select#SingleOptionSelector-0 {
color: red;
}
}
The first option is showed. But the second still not showing.
As seen as the attachment.
Or for example this one:
https://neon-factory.com/collections/new/products/troegs-neon-signs-
