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;
}
}All set!
Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!
* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!
