A user wants to change their image banner text color to white on desktop while keeping it black on mobile, since the mobile version displays text below the image.
Solution provided:
Add CSS code to the base.css file (Store Online → Theme → Edit Code → Assets/base.css)
Use a media query targeting screens 750px and wider to apply white text color only on desktop
The code targets specific banner elements including headings, text, and buttons
Issue encountered:
After implementing the solution, the “Shop Now” button background turned black instead of remaining transparent/unfilled
Resolution:
Remove the CSS rule targeting the button background color (#shopify-section-template--22660447666460__image_banner_hw4FHP .banner__box .button { background: #000; })
A screenshot was provided showing exactly which code section to delete
The discussion appears resolved with the user successfully achieving white desktop text while maintaining the original button styling.
Summarized with AI on November 8.
AI used: claude-sonnet-4-5-20250929.
Thank you it worked but there was one problem. The button for the shop now is filled with black now. I would like there to be no fill like how I had it at first.