Changing Slideshow button Width and text Color in Prestige

Solved
NZA
Pathfinder
105 12 32

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.

dmwwebartisan
Shopify Partner
8516 2000 2690

@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 | Bag is a cart drawer that maximizes your sales. View app →
NZA
Pathfinder
105 12 32

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 ?

0 Likes
dmwwebartisan
Shopify Partner
8516 2000 2690

@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 | Bag is a cart drawer that maximizes your sales. View app →
NZA
Pathfinder
105 12 32

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.

 

0 Likes
dmwwebartisan
Shopify Partner
8516 2000 2690

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 | Bag is a cart drawer that maximizes your sales. View app →
NZA
Pathfinder
105 12 32

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

0 Likes