How to center buttons on mobile with CSS (Squarespace 7.1)
Pin to save for later
Centering buttons on mobile devices is a simple yet powerful way to enhance the visual appeal and user experience of your Squarespace 7.1 website. Well-positioned buttons not only improve accessibility but also make your calls-to-action more prominent, encouraging visitors to take the next step.
To learn how to center text blocks on mobile only, check out this blog post!
Center buttons on mobile
From your Squarespace dashboard, go to:
Pages > Scroll down to Website Tools > Custom CSS
Copy & paste the CSS in the box below
Save!
//CENTER BUTTONS ON MOBILE
@media screen and (max-width:767px) {
.button-block .sqs-block-button-container {
justify-content: center;
text-align: center;
flex-direction: column;
}
}
Thanks for reading!
Did this tutorial help? Consider buying me a coffee as thanks! 🥰
Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!
* Disclaimer: This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. We only ever recommend tools we genuinely use and love.
