Shopify themes, liquid, logos, and UX
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;}
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.
Solved! Go to the solution
This is an accepted solution.
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;}
}
please add code your theme.css file .
#section-slideshow .Button {
color: #fff !important;
}
Thanks!
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 ?
i dont understand your think . please share screenshot what do you want!
Thanks!
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:
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:
On mobile it shows like this:
I need the button width to be exactly like the "WEB-DONUT MERCH TEE" text width on dektop and mobile.
Thank you very much.
This is an accepted solution.
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;}
}
Honeslty , probably the best guy on this platform. Thank you !!!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024