How to change image banner font color

Solved

How to change image banner font color

YIVAN
Explorer
51 1 16

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.

Screen Shot 2024-06-12 at 10.09.29 PM.png

Screen Shot 2024-06-12 at 10.11.41 PM.png

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

Pass: YIVAN24

 

Thanks in advance

Accepted Solutions (3)

suyash1
Shopify Partner
9529 1190 1528

This is an accepted solution.

@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;}
}
Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

suyash1
Shopify Partner
9529 1190 1528

This is an accepted solution.

@YIVAN - remove this part

#shopify-section-template--22660447666460__image_banner_hw4FHP .banner__box .button {
   background: #000;}
Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

EBOOST
Shopify Partner
1032 274 313

This is an accepted solution.

Hi, 

You can refer screenshot below to remove code

EBOOST_0-1718249990675.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Replies 5 (5)

EBOOST
Shopify Partner
1032 274 313

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;
  }
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
YIVAN
Explorer
51 1 16

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.

Screen Shot 2024-06-12 at 10.25.45 PM.png

suyash1
Shopify Partner
9529 1190 1528

This is an accepted solution.

@YIVAN - remove this part

#shopify-section-template--22660447666460__image_banner_hw4FHP .banner__box .button {
   background: #000;}
Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
EBOOST
Shopify Partner
1032 274 313

This is an accepted solution.

Hi, 

You can refer screenshot below to remove code

EBOOST_0-1718249990675.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

suyash1
Shopify Partner
9529 1190 1528

This is an accepted solution.

@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;}
}
Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.