MODULE SEVEN: LESSON THREE
What to Check (and Fix) for Mobile
You’ve previewed your site on mobile. now it’s time to know exactly what to look for and how to fix it. Even though Squarespace is responsive by default, it still needs your eye for detail to make sure everything looks clean, easy to read, and user-friendly on smaller screens.
In this lesson, I’ll walk you through a checklist of common mobile problem areas and show you the types of tweaks you can make to polish up your site for mobile visitors.
Text Size & Readability
What to Check: Is your text easy to read without zooming? Are the headings still bold and clear? Is there enough spacing between lines of text?
What to Fix:
Adjust text size using Site Styles to ensure body text isn’t too small on mobile.
Add line spacing (also called line height) to prevent text from feeling cramped.
Consider increasing heading sizes if they lose impact on smaller screens.
Image Scaling & Cropping
What to Check: Are any images getting awkwardly cropped on mobile? Are faces, important graphics, or text on images being cut off?
What to Fix:
Swap out images that don’t resize well. use images with a centered focal point when possible.
Use the Image Block’s Design Settings to control how images display.
For background images, check how they scale on mobile. sometimes replacing them with an Image Block works better.
Button Size & Tap Spacing
What to Check: Are your buttons easy to tap with a thumb? Are buttons or links too close together?
What to Fix:
Increase the padding inside buttons via Site Styles to make them taller.
Add spacing between buttons or links to avoid accidental taps.
Keep button text concise so buttons don’t shrink too small on mobile.
Section Spacing & Alignment
What to Check: Are your sections stacked too close together? Is there too much white space that pushes important content too far down?
What to Fix:
Adjust the section padding and spacing in Section Settings.
Use spacers if you need more breathing room between elements.
Remove unnecessary padding that causes excessive scrolling.
Navigation & Menus
What to Check: Does your navigation menu collapse neatly into a mobile menu (also called a hamburger menu)? Are the links easy to read and tap?
What to Fix:
Simplify your navigation if it feels cluttered on mobile.
Rename links if they’re too long and get cut off.
Test dropdown menus. make sure they expand properly on mobile.
if you open the mobile navigation and there’s nothing there, you need to change the colors. more than likely it’s because the navigation is set to the same color as the background. head to site styles to fix this.
Important Reminder
Most design changes in Squarespace will apply to both desktop and mobile.
There aren’t built-in settings to style them separately, so if you resize text or change an image, expect that update to reflect everywhere.
If you need device-specific changes (like hiding a section on mobile only), that requires custom CSS. stayed tuned for blog posts in the future that will show you how to do that.
Action Steps
Adjust padding, margins, and section spacing so your content looks clean on mobile.
Increase font sizes for readability on small screens.
Make sure buttons are large enough and spaced well for easy tapping.
adjust images that don’t display well on mobile.
