How to change image banner text and button color on desktop without changing mobile

Store Design
, , ,

Topic summary

A user wants to change banner text and button colors to white on desktop while keeping them black on mobile.

Solution provided:

  • Add custom CSS code to the theme.liquid file (above the tag)
  • The code uses media queries to target desktop screens (min-width: 750px)
  • Targets .banner__content elements for text and button styling

Issue encountered:
The initial CSS solution worked for banners but also affected button outline colors on other desktop components, like “add to cart” buttons on product pages.

Resolution:
The user fixed the issue by modifying the CSS selector from .button--secondary::after to .banner__content .button::after, which restricts the styling changes to banner buttons only.

Status: Resolved - the customization now applies exclusively to banner elements without affecting other page components.

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

I like to change banner text and button color to white on desktop version only while keeping it black color on mobile version.

Mobile:

Screenshot_20230717-230307_Chrome.png
Screenshot_20230717-230307_Chrome.png1080Ă—1264 68.3 KB

Desktop:

Screenshot_20230717-230253~3.png
Screenshot_20230717-230253~3.png1080Ă—552 172 KB

thanks

2

Hey @Fikson
Kindly share your Store URL and Password if enabled

3

Hiden.myshopify

Hiden

4

Hey @Fikson

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

Moeed_0-1689617394082.png
Moeed_0-1689617394082.png1902Ă—869 120 KB

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

Best Regards,
Moeed

1 Like
5

Thanks a lot. Worked perfectly :grinning_face:

6

Screenshot_20230718-213825~2.png
Screenshot_20230718-213825~2.png1080Ă—485 56.8 KB

I works but it also changes button outline color on other components on desktop, like “add to cart” on product.

Can it only be made to banners?

Thanks,

Edit: found a way to fix it.

Replaced line “.button–secondary:after {” to “.banner__content .button::after {”