How to fix the ''Continue shopping'' button all black issue (for mobile)

Topic summary

A user encountered a styling issue on mobile where the “Continue shopping” button in their cart displayed as all black (black background with black text), making it unreadable. The desktop version correctly showed a black button with white text.

Solutions Provided:

  • One response suggested a YouTube tutorial on customizing mobile buttons
  • Two CSS code solutions were offered:
    1. A general fix targeting .cart__warnings a.button with background and color properties
    2. A mobile-specific media query solution using @media (max-width: 750px) to set text color to white

Resolution:
The issue was successfully resolved using one of the provided CSS snippets. The user confirmed the fix worked and thanked the community.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

Hi team! Everything on my web is exactly how I want it to be for now, however I have a small issue on my mobile version that bothers me. The ‘‘Continue shopping’’ button is all black with black letters and a hover effect that turns the box grey. I want it to be exactly like my desktop version, which is just a simple black box with ‘‘Continue shopping’’ in white letters. Here’s my URL: https://richardzekry.com/

Please let me know if this is fixable, thank you!

Mobile screenshot is the issue.*
Desktop screenshot is how I want it to be.*

Hey there Richard @richardzekry perhaps this video here https://m.youtube.com/watch?v=ZIShkpTY_TY could direct you on how to customize the button to exactly how you want to be on your mobile.

Hi @richardzekry

Let try to add Custom CSS:

.cart__warnings a.button {
  background-color: #000;
  color: #fff !important;
}

1 Like

Hi @richardzekry

You can solve it by adding this code to Custom CSS of your theme settings

@media (max-width: 750px) {
.cart__warnings .button { color: #fff; }
}

Hello, this solved the issue. Thank you very much!

You’re welcome :hugs:

1 Like