Button on mobile different color

Solved

Button on mobile different color

lunalucenteskin
Excursionist
36 0 6

Hi everyone,

 

On our banner on desktop the buttons are being displayed in white but when i switch to mobile they become black, how can i change this to be white.

 

Kind regards

 

 

Image 14-06-2024 at 12.19 (1).jpegImage 14-06-2024 at 12.19.jpeg

Accepted Solution (1)

ZestardTech
Shopify Partner
5636 1031 1359

This is an accepted solution.

Hi @lunalucenteskin 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout > theme.liquid and paste this at the bottom of the file:

 

<style>
@media screen and (max-width: 767px) {
.m-slider--content-stack .m-button--white {
background-color: #ffffff;
border-color: #ffffff;
color: #000000;
}
.m-slide__button-second.m-button.m-button--secondary.m-button--small {
--btn-color-hover: #fff !important;
--btn-color: hsla(0,0%,100%,1) !important;
}
}
</style>

 

ZestardTech_0-1718361741384.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 3 (3)

GTLOfficial
Shopify Partner
267 50 51

Hello @lunalucenteskin 
Please let me know the URL of your website, so that i can check.

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
lunalucenteskin
Excursionist
36 0 6

ZestardTech
Shopify Partner
5636 1031 1359

This is an accepted solution.

Hi @lunalucenteskin 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout > theme.liquid and paste this at the bottom of the file:

 

<style>
@media screen and (max-width: 767px) {
.m-slider--content-stack .m-button--white {
background-color: #ffffff;
border-color: #ffffff;
color: #000000;
}
.m-slide__button-second.m-button.m-button--secondary.m-button--small {
--btn-color-hover: #fff !important;
--btn-color: hsla(0,0%,100%,1) !important;
}
}
</style>

 

ZestardTech_0-1718361741384.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing