How to change image banner font color

Topic summary

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.

Hello,

Is there a way to change the text color in my image banner to white while also keeping the mobile version black?

The reason is because on mobile I want the text to show below the image so the color has to remain black.

URL: https://www.yivan.us/

Pass: YIVAN24

Thanks in advance

Hi @YIVAN ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Add code below to end of file
@media(min-width: 750px){
  #shopify-section-template--22660447666460__image_banner_hw4FHP .banner__box * {
    color: #fff;
  }
  #shopify-section-template--22660447666460__image_banner_hw4FHP .banner__box .button {
   background: #000;
  }
}

@YIVAN - add this css to the end of your base.css file and check

@media screen and (min-width:750px){
#Banner-template--22660447666460__image_banner_hw4FHP .banner__heading,
#Banner-template--22660447666460__image_banner_hw4FHP .banner__text,
#Banner-template--22660447666460__image_banner_hw4FHP .banner__buttons a{color:#fff;}
}
1 Like

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.

@YIVAN - remove this part

#shopify-section-template--22660447666460__image_banner_hw4FHP .banner__box .button {
   background: #000;}
1 Like

Hi,

You can refer screenshot below to remove code