Changing Slideshow button Width and text Color in Prestige

Store Design
1

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
donutsole.hu Home.png2185×1126 160 KB

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.

1 Like
2

@NZA

please add code your theme.css file .

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

Thanks!

1 Like
3

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 ?

4

@NZA

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

Thanks!

1 Like
5

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
Button Equal.png443×148 14.9 KB

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.png
Button 1.png599×186 22.7 KB

Button 2.png
Button 2.png543×229 23 KB

On mobile it shows like this:

Button mobike.png
Button mobike.png256×212 11.5 KB

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

Thank you very much.

6

@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;}
}
1 Like
7

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