How can I adjust the color of my 'Shop Now' button for mobile view?

Technical Q&A
,

Topic summary

A user needs to change their ‘Shop Now’ button color on mobile view from white to black (it already displays as black on desktop).

Solution provided:

  • Navigate to Online Store → Theme → Edit code
  • Locate the base.css file
  • Add CSS media query targeting screens with max-width 947px
  • Apply background: black !important; and color: white !important; to the button element with class .button.button--primary
  • Save the file

The CSS code uses !important flags to override existing mobile styles. The responder is from PageFly Landing Page Builder App support team.

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

I have a ‘shop now’ button on my webshop that appears black on desktop but white on mobile, I want to change the color of the button on mobile to also be black. Can someone please post the custom CSS I need to do this?

Here is the URL for the website (I want to change the ‘Shop the Archive’ button to black on mobile):

https://www.allisonsarchive.shop/

2

Hi @AllisonsArchive

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 749px){

a.button.button–primary {

background: black !important;

color: white !important;

}}

Hope that my solution works for you.

Best regards,

Lucas| PageFly