Why does button text color change on mobile view?

Store Design
, , ,

Topic summary

A user encountered an issue where button text on collection pages displayed correctly in black on desktop but changed to blue on mobile devices.

Initial Problem:

Community Response:

  • Multiple users initially reported being unable to reproduce the issue, seeing the buttons display correctly on their mobile devices (tested in Chrome, Mozilla, and incognito mode)

Resolution:

  • A CSS fix was provided: adding .boost-sd__header-description button { color: #000 !important; } to the theme.css file
  • The solution successfully resolved the color inconsistency
  • User confirmed the fix worked and marked it as the accepted solution

The discussion demonstrates a common mobile-specific styling issue that was resolved through targeted CSS modification.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am having an issue that I cannot figure out. I have collection pages with buttons that have black text on them. It appears this way on desktop, and this is the way I want it to look. Screenshot below:

sarahmglaser_1-1696330878350.png
sarahmglaser_1-1696330878350.png815×578 23.2 KB

However, when accessing the site on mobile, the button text changes to blue. Screenshot attached below. Can this be changed? URL is https://mglaser.com/collections/amada

sarahmglaser_2-1696331111273.png
sarahmglaser_2-1696331111273.png412×743 159 KB

1 Like
2

Hi @sarahmglaser

The button of blue text on mobile is not visible on my end, check the screen shot.

Made4uoRibe_0-1696331516134.png
Made4uoRibe_0-1696331516134.png484×449 17 KB

I even open incognito, and mozilla im using chrome.

3

Hi, @sarahmglaser .

Its Look Already perfectly.

websensepro_0-1696332807840.png
websensepro_0-1696332807840.png542×554 27 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

4

@sarahmglaser

Its perfectly fine form my side.

syedsumaimaly_0-1696331950035.png
syedsumaimaly_0-1696331950035.png479×436 21.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.boost-sd__header-description button {
color: #000!important;
}

ZestardTech_0-1696333322610.png
ZestardTech_0-1696333322610.png745×879 46.8 KB

1 Like
6

This did the trick, thank you so much!

1 Like
7

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.