A Shopify store owner using the Palo Alto theme reports that slider buttons remain full-width on mobile devices regardless of selecting small, normal, or large size options.
Issue Details:
Proposed Solutions:
Two CSS-based fixes were offered:
Media query approach: Add CSS to base.css/theme.css limiting button width to 68% on screens under 768px
Theme CSS modification: Edit theme.css at line 29983, changing .slide__btn width from its current value to auto and display to block
One responder noted the issue stems from the theme’s default CSS combined with the slider heading displaying across two lines, which triggers the full-width behavior. Both solutions require accessing the theme’s code editor through Online Store > Theme > Edit Code.
Hello,
Something is off with the palo alto theme. For the slider buttons there are 3 options - small, normal and large. No matter which option i choose, the button stay large - full width. I want them to be smaller. See photo attached. This is only for the mobile version.
Website - www.bear-tees.com
Hi @zlati84 ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
@media (max-width: 768px) {
.slide__buttons .main-buttons div:first-child {
width: 68% !important;
margin: auto;
}
}
Hi,
I checked and found that your button size changes based on the selected option—Small, Medium, or Large. Regarding the full-width issue, it’s caused by the theme’s default CSS. We need to remove that specific code to prevent the button from displaying at full width.
Your first slider heading is showing in two lines, which is why the button appears full width. A minor CSS adjustment will resolve this issue and ensure the button displays correctly.
alternative solution
Go to Online Store, then Theme, and select Edit Code
Search for theme.css file. → go to line number 29983 and replace with below CSS.
.slide__btn {
width: auto;
display: block;
}
