Hello! I would like to change my slideshow button size only for mobile using the custom CSS in the theme customizer. Im not sure what is the reason but people rarely use the custom CSS box in theme customization, which is way easier to use and edit and see the changes in realtime than pasting a line of code in the “Edit Code” Section. Please, any help would be highly appreciated!
Hello @Vatiliotis Can You Please Share your Store URL? i WIll check and Provide a Proper Solution
Hello! this is my store’s url:
I have a new slideshow block for some new arrivals that I have not published yet, but you can still see the button size on the slideshow on mobile that it is too large. Thank you!
Hello @Vatiliotis
Which button can you send here the screenshot?
Hi @Vatiliotis
Which button can you send here the screenshot?
Hello @Vatiliotis
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->styles.css>Add this code at the bottom.
a.overlay-text__button.button.altcolour {
padding: 1em 14px !important;
}
Hello @oscprofessional
Is it possible to give me code so that I can add on my custom CSS section in the theme customizor? Just like shown in the picture below, Thank you!!! (please ignore the code I have already written there, but what I’m looking for is to add the code in the bottom there)
Hello @Vatiliotis
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->styles.css>Add this code at the bottom.
@media only screen and (max-width: 767px)
{
a.overlay-text__button.button.altcolour {
padding: 1em 14px !important;
}
}
Hi @Vatiliotis
Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag
a.overlay-text__button.button.altcolour {
padding: 10px 15px;
}
Hello @oscprofessional
Thank you for the code but it doesn’t seem to work, is there any other suggestion on how to tackle the problem? Thanks!
Hello @syedsumaimaly ! Thank you for the suggestion but this does not work either, no changes show up on the button size. Is there any other recommendation you can give me? Thank you!
Hello @Vatiliotis
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->styles.css>Add this code at the bottom.
@media only screen and (max-width: 767px)
{
a {
padding: 1em 14px !important;
}
}
1 Like
Hello @oscprofessional
This code works perfectly! thank you very much!
**Hi @Vatiliotis **
Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag
@media only screen and (max-width: 767px){
overlay-text__text a.overlay-text__button.button.altcolour {
padding: 10px 15px;
}
}