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!
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.
More Squarespace tutorials
Learn how to build a complete brand identity from scratch using Claude AI and Canva, no designer or big budget required. This step-by-step tutorial covers audience research, brand strategy, logo creation, and launching your brand on Squarespace.
Discover the best Squarespace integrations for 2025. Grow your site with Flodesk, SEOSpace, SquareKicker and ThriveCart plus exclusive discounts inside.
Learn how to use Squarespace's new Block Animations feature to add motion to individual blocks on your site, no CSS or custom code required!
Squarespace’s new Transforms tool is changing how you customize your site, giving you more creative control directly within the Fluid Engine Editor. It allows you to move, scale, rotate, and adjust the opacity of image and text blocks, redefining the rigid grid system Squarespace is known for. With this feature, you can create more dynamic, custom layouts in Squarespace 7.1 without a single line of custom CSS.
With 120+ free Squarespace templates available, it can be challenging to figure out which ones are actually optimized for online shopping and which will support your store’s long-term growth.
To help you skip the overwhelm of endless browsing, we’ve curated a list of the best free Squarespace 7.1 templates for eCommerce and online stores. Each one features clean layouts, mobile-friendly design, and built-in functionality tailored for product-based businesses.
This guide will show you how to create a Coming Soon page using the Squarespace Lock Screen feature, and how to set it up step-by-step for a smooth, stress-free redesign.
Squarespace 7.1 now allows you to hide blocks on mobile or desktop without CSS. Follow this 2025 guide to optimize your layout and improve your mobile design.
Learn how to upload and use custom fonts in Squarespace 7.1 with the 2025 update. Follow this step-by-step guide to apply brand fonts to your site without using CSS.
Learn how to create and connect a custom 404 page in Squarespace 7.1. Follow our step-by-step tutorial to improve your website’s user experience and keep visitors engaged.
Struggling to create beautiful, high-converting emails? We’ve got you covered! To help you save time, we’re giving away five professionally designed Flodesk email templates—completely free.
Whether you're launching a new product, nurturing leads, or sending a special offer, these templates will make your emails stand out while keeping things simple and effective. Download them now and start sending emails that look as good as they convert.
