How to Use Side-by-Side Buttons for Mobile and Desktop in Squarespace 7.1
Squarespace forces buttons to stack on top of each other, especially on mobile. You end up with wasted space, and your calls to action don’t visually “POP” right in the visitor's face.
But what if you want your “Learn More” and “Buy Now” buttons to appear next to each other, the way modern, high-converting websites do?
In this walkthrough, you’ll learn step by step how to do it without plugins or complex hacks, and make your buttons look amazing on both desktop and mobile in Squarespace 7.1. For the CTA section, landing page, or promotion block, your buttons are neat, organized, and converting.
Jump into a full step-by-step tutorial on a simple HTML and Flexbox CSS, completely customisable and mobile-friendly for beginners.
Why Do We Need the Side-by-Side Button?
✔ Saves vertical space on all screen sizes
✔ Groups related actions neatly together
✔ Revamps your design — cleaner, more professional, sophisticated appearance
✔ User portal Experience enhancement – users can view a couple of actions without much scrolling.
✔ Overrides Squarespace’s native behavior (to stack the buttons vertically on mobile)
How Does It Work?
We use:
HTML inside a Code Block (for the structure)
Flexbox CSS (for responsive, side-by-side alignment)
Flexbox automatically adjusts the button layout across different screen sizes without breaking the design.
Step-by-Step Full Implementation
Step 1: Add HTML (Inside a Code Block)
Go to your page → Insert a Code Block → Paste this:
<div class="side-by-side-buttons">
<a href="/contact" class="custom-button">Contact Us</a>
<a href="/subscribe" class="custom-button">Subscribe</a>
</div>
Customize the text (Contact Us, Subscribe) and links (/contact, /subscribe) according to your website.
Step 2: Add CSS (Go to Pages → Custom Code → Custom CSS)
Go to Pages → Custom Code → Custom CSS
/* Wrapper for the buttons */
.side-by-side-buttons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin: 20px 0;
}
/* Styling individual buttons */
.custom-button {
background-color: #ff6600;
color: #fff;
padding: 12px 24px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: 0.3s ease;
}
/* Hover effect for buttons */
.custom-button:hover {
background-color: #ff3300;
}
/* Mobile responsive adjustments */
@media screen and (max-width: 480px) {
.side-by-side-buttons {
gap: 10px;
}
.custom-button {
padding: 10px 18px;
font-size: 14px;
}
}
This ensures beautiful button spacing, hover animations, and perfect mobile responsiveness.
How to Use This Setup
Add the HTML wherever you want the buttons (in a Code Block).
Paste the CSS in Go to Pages → Custom Code → Custom CSS
Adjust colors, paddings, border-radius, and hover effects as needed.
Save and test it on desktop, tablet, and mobile. —
Your buttons should now appear perfectly side-by-side on every device!
Customization Options
Add icons to buttons.
<a href="/contact" class="custom-button">
<i class="fa fa-envelope"></i> Contact Us
</a>
Align left or right:
Use justify-content: flex-start; or flex-end; instead of center inside side-by-side-buttons.
Stack only on very small screens:
Use flex-wrap: wrap, and adjust the media queries.
External links behavior:
If your button links to an external page, add target="_blank" inside <a>:
<a href="https://external.com" target="_blank" class="custom-button">Visit</a>
Bonus Pro Tips
Add a slight button shadow for a more modern UI:
.custom-button {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
Animate buttons on scroll using Squarespace’s built-in animations
(e.g., Fade In, Slide In).
Optimize for SEO by making buttons use relevant CTA phrases like "Get Free Estimate" or "Download Guide".
Final Summary
Problem: Squarespace's default stacking behavior makes buttons vertical on mobile.
Solution: Use custom HTML and Flexbox CSS to create responsive side-by-side buttons.
Result: Cleaner, more efficient navigation, modern UI, and better call-to-action engagement across devices.
Frequently Asked Questions (FAQ)
1. Why do my buttons stack vertically in Squarespace?
Squarespace’s default behavior is to stack buttons vertically, especially on mobile, to ensure responsiveness. However, this can limit layout flexibility and reduce visual impact in CTA sections.
2. Can I place two buttons side-by-side without using a plugin?
Yes. This guide uses a simple HTML block and Flexbox CSS. No plugins, extensions, or complex workarounds are required.
3. Will this layout work on mobile?
Absolutely. Flexbox’s wrap and responsive media queries make sure your buttons adjust perfectly across desktop, tablet, and mobile screen sizes.
4. Where do I paste the HTML code?
Go to the Squarespace page or section where you want the buttons, insert a Code Block, and paste the HTML snippet provided in the blog.
5. Where should I paste the CSS code?
Go to Design → Custom CSS in your Squarespace dashboard, and paste the provided CSS there. This ensures styling is applied globally.
6. How can I change the button colors and spacing?
Inside the .custom-button class, update the:
background-color
color
padding
border-radius
gap in .side-by-side-buttons
These are all fully customizable via CSS.
7. Can I make the buttons align left or right instead of center?
Yes. Change the justify-content property in the CSS:
justify-content: flex-start; /* Left aligned */
justify-content: flex-end; /* Right aligned */
