How to Properly Preview and Optimize Your Squarespace Site for Every Screen Size

You’ve spent hours perfecting your site in the editor — only to check it on your phone and… yikes. A button’s cut off, your headline is tiny, and that beautiful hero image? Completely off-center.

Don’t panic — this happens to everyone. The trick is knowing how to actually preview your site so you can spot and fix these issues before launch.

Step 1: Use Squarespace’s preview tools

In the editor, toggle between desktop and mobile views using the device icons. Make sure to check out that mobile view EVERY TIME you make a change. It’s easy to forget to tweak this.

Exit the editor and don’t click the arrow in the top right corner—just scroll through the preview. Looking at this view gives you a sense of what your site on a smaller laptop screen will look like. You’ll find that paragraph text often ends up a line below—crashing into elements below it, and columns of text look really narrow. If you don’t like how it looks, adjust the width in the editor and return to this preview to make it look good in both views.

Step 2: Make sure your page is set to a good size

A good overall maximum content width for desktop is around 1280px and up to 1680px. If you’re starting with one of our templates, this is already set in Site Styles.

Step 3: Resize your browser window

Manually resize your browser to catch small layout quirks that previews sometimes miss.

Step 4: Check typography and buttons

Make sure body text is at least 16px. Some sites get away with smaller text… it looks fresh and cool. But y’all, I am getting older and for folks like me, I need a good size font.

Buttons should be big enough to tap on mobile view—at least 44px tall and fill most of the screen width. Remember that some people have, ahem, thicker thumbs than you.

Step 6: Check on ALL the devices and browsers

Okay, this seems obvious but you need to check out your web site on all of the devices you can get your hands on. Ask to see your grandparents old brick cell phone, your mom’s tablet, your partner’s desktop (who has like three wide screens, right?), and your developer friend’s curved monitor…. okay, that’s extreme but you get the picture.

Lastly, take a look on Chrome, MicrosoftEdge, Firefox—all the browers you can muster. To be honest, it is so frustrating as a designer to do this, and tweak, and tweak, and tweak.

And let me just tell you, done is better than perfect. It’s going to look slightly different on every device and browser. And its likely, you’re the only one whose gonna notice so don’t sweat it too too much.

———

Skip the stress — my templates are responsive and mobile-ready, right out of the box.