Solved

Changing Slideshow button Width and text Color in Prestige

NZA
Shopify Partner
128 12 34

Good day everyone,

I am trying to change the button width for the Prestige theme in the Slideshow section.

I need the button width to always be the exact same width as the text above it "WEB-DONUT MERCH TEE" (See image below) 

& i need to change the text color on the button to white, i managed to change the button colors by adding this code to the bottom of the my theme.css file:

#section-slideshow .Button {color: #FFFFFF; border-color: #FF87B0 !important; width: 24%; font-size: 20px;}
#section-slideshow .Button::before {background-color: #FF87B0 !important;}

donutsole.hu Home.png

The code worked to change the button color and width but the button width is disproportional to the text above it in size. The text on the button also needs to be white color.

Store url: https://donutsole-hu.myshopify.com/

Password: twilye

Please help with these issues and thank you in advance.

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@NZA 

Please add css code your theme.css bottom of the file.

@media screen and (max-width:640px){
#section-slideshow .Button {color: #fff !important;border-color: #ff87b0!important;width: 70%;font-size: 15px;}
.ButtonGroup--spacingSmall .ButtonGroup__Item {margin: 2px;}
#section-slideshow .Button::before {background-color: #FF87B0 !important;}
}

@media screen and (min-width:641px){
#section-slideshow .Button {color: #FFFFFF !important; border-color: #FF87B0 !important; width: 24%; font-size: 20px;}
#section-slideshow .Button::before {background-color: #FF87B0 !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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 6 (6)

dmwwebartisan
Shopify Partner
12282 2546 3694

@NZA 

please add code your theme.css file .

#section-slideshow .Button {
    color: #fff !important;
}

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
NZA
Shopify Partner
128 12 34

Thank you that solved the color part of my question, do you know how i can lock the width of the button the text above it ?

dmwwebartisan
Shopify Partner
12282 2546 3694

@NZA 

i dont understand your think . please share screenshot what do you want!

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
NZA
Shopify Partner
128 12 34

Thank you for your time first of all

The button in the sildeshow, i tried changing the width to make it wider because i want it to be same width as the text above it. like this:

Button Equal.png

But everytime i change the width of the display, the width changes with it. it's because i set the button width to 24% (Relative to the slidwshow) Examples below:

Button 1.pngButton 2.png

On mobile it shows like this:

Button mobike.png

I need the button width to be exactly like the "WEB-DONUT MERCH TEE" text width on dektop and mobile.

 

Thank you very much.

 

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@NZA 

Please add css code your theme.css bottom of the file.

@media screen and (max-width:640px){
#section-slideshow .Button {color: #fff !important;border-color: #ff87b0!important;width: 70%;font-size: 15px;}
.ButtonGroup--spacingSmall .ButtonGroup__Item {margin: 2px;}
#section-slideshow .Button::before {background-color: #FF87B0 !important;}
}

@media screen and (min-width:641px){
#section-slideshow .Button {color: #FFFFFF !important; border-color: #FF87B0 !important; width: 24%; font-size: 20px;}
#section-slideshow .Button::before {background-color: #FF87B0 !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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
NZA
Shopify Partner
128 12 34

Honeslty , probably the best guy on this platform. Thank you !!!