Help: free shipping label mobile + desktop vs iPad

abcxytz1234
Explorer
77 1 24

Hi 

 

can someone help me how to change the color of button background of free shipping label so it’s consistent with one color across all devices? Currently it’s black on iPad vs green on desktop and mobile. see screenshots 

Site link: https://doodlemedo.com/collections/all-prints/products/the-carnival

 

if you need developer access, feel free to email me at hello@doodlemedo.com

here is the code I have added to min.css 

 

.free-shipping {
background: #000;
}

.free-shipping__text {
font-family: var(--button-family);
font-size: var(--button-size);
line-height: var(--button-line-height);
font-style: var(--button-style);
letter-spacing: var(--button-letter-spacing);
font-weight: var(--button-weight);
text-transform: var(--button-transform);
text-align: center;
padding: 5px;
}

 

 

2120E1E7-851F-4F59-9242-D39EEE198D39.png

228E6E12-2EFB-4ED7-883F-A237212E7C69.png

dmwwebartisan
Shopify Partner
7368 1746 2332

@abcxytz1234 

Please add the following code at the bottom of your assets/theme.min.css file. 

@media only screen and (max-width: 768px){
.free-shipping {
background: #25a799 !important;
}

.free-shipping__text {
font-family: var(--button-family);
font-size: var(--button-size);
line-height: var(--button-line-height);
font-style: var(--button-style);
letter-spacing: var(--button-letter-spacing);
font-weight: var(--button-weight);
text-transform: var(--button-transform);
text-align: center;
padding: 5px;
}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
dmwwebartisan
Shopify Partner
7368 1746 2332

@abcxytz1234 

Code for desktop 

@media only screen and (min-width: 769px){
.free-shipping {
background: #25a799 !important;
}

.free-shipping__text {
font-family: var(--button-family);
font-size: var(--button-size);
line-height: var(--button-line-height);
font-style: var(--button-style);
letter-spacing: var(--button-letter-spacing);
font-weight: var(--button-weight);
text-transform: var(--button-transform);
text-align: center;
padding: 5px;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
abcxytz1234
Explorer
77 1 24

thanks! Do I add your code below the current code OR replace the current code with yours?

0 Likes
dmwwebartisan
Shopify Partner
7368 1746 2332

@abcxytz1234 

first code for mobile and second for desktop.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
abcxytz1234
Explorer
77 1 24

@dmwwebartisan Thanks! I added both of your codes and changed the background color to black #000. It showed up as black on ipad but still green (original theme) on desktop and mobile. Is it possible to override the green color from the theme?

0 Likes
abcxytz1234
Explorer
77 1 24

@dmwwebartisan need help tweaking above

0 Likes
dmwwebartisan
Shopify Partner
7368 1746 2332

@abcxytz1234 

please change 

.free-shipping {
background: #25a799 !important;
}

Replace to 

.free-shipping {
background: #000 !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
abcxytz1234
Explorer
77 1 24

Hi 

 

@dmwwebartisan I have changed both to #000 but mobile and desktop is still in green color. That's what I meant in the prior post. I think green is the default color in the theme. Is there a way to override this?

0 Likes
dmwwebartisan
Shopify Partner
7368 1746 2332

@abcxytz1234 

button showing in black color mobile & desktop i have check your web shop.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes