Master image and text wrap in Squarespace

Why This Matters

If you’ve spent any time wrestling with Squarespace lately, you’ll have noticed things aren’t quite the same as they were a year or two ago. The arrival of the Fluid Engine has shuffled the deck, making previously reliable tricks harder to find. Many designers, freelancers and small business owners are used to getting layouts just-so: a bit of text snuggled up next to a photo, a quote nestled beside a team headshot, or a product squeeze-play on your homepage. When you can't get the layout right, it’s far too easy for the whole page to look slightly off-centre, cluttered or like someone forgot to finish the job. These “little” details are what separate a professional site from a clunky template job.

A clunky or inconsistent layout is immediately noticeable to your visitors. They might not comment, but the sense of polish is missing. Worse, you might find your text breaking unexpectedly, mobile layouts squashing images into postage stamps, or your carefully chosen product shots being overlooked entirely. This costs credibility, leads, and yes, if you’re running a business, money.

If you've recently updated to Squarespace’s Fluid Engine and found your hard-won image wrap and text alignment superpowers have vanished, you’re definitely not alone. This is one of the most common questions I’ve seen recently, from both experienced site owners and those just starting out. You can still achieve that classic text-wrap effect, even on the very latest Squarespace setup. There are a few new tricks and some subtle tweaks, but once you spot them, everything feels much more under control.

Common Pitfalls

Here’s where most people land themselves in hot water:

• Dragging and dropping in the wrong way: The Fluid Engine's "lego brick" design leads many to treat content blocks as separate islands, not aware that you can still force text to wrap the way you want if you know how.
• Overcomplicating things: Some dig around for code snippets, install third-party add-ons, or try fiddling with CSS, all in pursuit of a simple wrap effect. Nine times out of ten, this isn’t needed and ends up breaking things elsewhere on the page.
• Giving up when it doesn't look perfect on mobile: Fluid Engine changed mobile layouts a fair bit. Sometimes your beautifully wrapped desktop block turns into a single-column mess on phones, and people throw in the towel when it doesn’t look the same everywhere.
• Missing the new stacking controls: Since Squarespace updated the underlying engine, some folks aren’t aware of the new options for columns and block snapping, leading them to miss obvious fixes for spacing or alignment.

If you’ve found yourself muttering at the screen or contemplating a return to pen and paper, don’t panic. These are the sorts of things I see every week, even from long-term Squarespace pros.

Step-by-Step Fix

Let’s get hands-on. We'll keep it to the main event: getting your image and text to wrap nicely, look sharp, and behave across devices. I’ll use plain language and real examples, just as I would if we were sitting together in the office.

1. Prepare Your Canvas

Before diving in, pick the page you want to update. I recommend creating a new “Test” page for practice, which keeps your experiments separate from the live site. Not shown in your navigation, it’s your digital sandpit.

• Open Squarespace, head to the Pages panel, and click the "+" to add a new page.
• Choose "Blank Page" and give it a memorable name, e.g., “Image Wrap Test”.
• Click "Edit" to start working in Fluid Engine.

2. Insert Your Image Block

Start with the image first. Yes, you can add text before or after, but by leading with an image, you’ll have much greater control over positioning.

• Hover your mouse where you want the image to appear. Look for the blue plus icon inside a blue outlined oval.
• Click it, then select “Image” from the block picker. Upload or choose the image you want to use.
• In the Fluid Engine, images are now their own block entity. Don’t adjust alignment yet.

3. Position Your Image Beside Text

This is where Fluid Engine feels new. Instead of stacking blocks vertically, you can snap them horizontally to create multi-column layouts.

• Add a new Text Block next to your Image Block. Click the blue plus, choose "Text," and position it to the right (or left) of your image.
• Drag the Text Block into place beside the image. You'll see looped blue outlines highlight as you move. Make sure both the Image and Text Blocks are within the same "row".
• If you want the image left with text to the right, drag and drop the image first, then slot the text block beside it on the right. For a right-aligned image, reverse the order.

On desktops, text should sit neatly next to the image. On mobile, Squarespace typically re-stacks the blocks, making the image appear above the text for readability.

4. Tweak Column Widths and Spacing

Fluid Engine uses draggable handles to adjust how much space each block occupies.

• Hover near the edge of your image or text blocks until you see the two-way arrow. Click and drag to resize. The grid will auto-adjust to keep everything lined up.
• Adjust the gap between the image and text by dragging columns closer or further apart. This gives you granular control, so you’re not stuck with default margins.
• For more advanced tweaks, click on each block, open the design settings (the paintbrush icon), and explore options like padding and block alignment.

5. Test Mobile View and Adjust Stacking

The biggest mistake I see is ignoring mobile previews. A beautiful wrap on desktop does not always look right on a phone.

• In Fluid Engine, click the mobile preview icon (usually a little phone silhouette).
• Check that your image and text don't turn into an awkward tower of mismatched sections or teeny unreadable thumbnails.
• Move blocks up or down if needed, or use the “Hide” feature to display different blocks on desktop and mobile (if you want a larger image on desktop, but a simpler layout on mobile).

6. Save, Refresh and Repeat

Once you’re happy with how things sit, hit save. Take a breather, then refresh both the editor and a live preview of the page (CTRL+SHIFT+R for a hard refresh) to ensure Squarespace hasn’t cached an older version.

• If things go wrong or you drag and drop a block halfway into the ether, don’t stress. Just delete the block and add it back in. This is much quicker than faffing about with Undo.
• Keep practising! The Fluid Engine feels odd at first, but you’ll soon spot the visual cues that indicate true side-by-side wrap (as opposed to simply stacking blocks as columns).

What Most People Miss

Everyone chases the perfect desktop look, but a better move is to allow for small imperfections that create consistency, especially on mobile. Squarespace’s Fluid Engine does a pretty good job rearranging content for smaller screens, but the days where one layout worked perfectly everywhere have gone.

The best approach is to test your layouts on at least two devices before showing clients (borrow your friend’s Android if you must). Also, use invisible blocks for fine-tuning spacing and stacking order. These blocks are key for subtle adjustments.

Another overlooked tip is that you have more options than just side-by-side. Try breaking up text into multiple short blocks, place them around images of different shapes and sizes, or stagger your content down the page for a more dynamic visual flow. The wrap effect works best when you move beyond old-fashioned columns and start experimenting with layers.

The Bigger Picture

After you master image and text wrap in Squarespace, and understand the Fluid Engine’s updated quirks, you achieve a higher level of professional polish on every page. Your layouts look cleaner, your brand feels more considered, and visitors can browse without friction.

Tidying up your content in this way pays off:

• Less time tinkering and more time creating
• Fewer panic moments when a client checks the site on their iPad or an ancient phone
• Cleaner designs that convey trust to your visitors (trust equals sales, signups, or the next project)
• The confidence to experiment with more advanced features, like galleries, summary blocks or custom split content layouts, all of which build on this foundation

By setting up your workflow like this, you prepare yourself for growth instead of endless troubleshooting.

Wrap-Up

Squarespace’s shift to Fluid Engine has complicated a few old habits, but sharp image and text wraps are still entirely possible. With practice, and the willingness to make use of the drag-and-drop grid, you’ll soon breeze through layouts that look great everywhere.

Key steps:

1. Set up a play-space page, and don’t be afraid to start over if blocks misbehave.
2. Insert and position images using Fluid Engine’s grid, thinking side-by-side, not just top-and-bottom.
3. Adjust column widths, keep an eye on padding and spacing, and preview on mobile early, not after hours of design.
4. Use stacking, hiding or duplicate sections for true control on every device.

For a full walkthrough, our free tutorial video shows every step. Search "Pixelhaze Academy Squarespace Image Wrap" on YouTube, or check the resource links below.

Want more helpful systems like this? Join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.

About the Author

Elwyn Davies is Pixelhaze’s founder, a Squarespace Authorised Trainer, and web design obsessive with over 20 years’ experience helping businesses and creatives get the best out of their online presence. He’s happiest with coffee in hand, a layout to untangle, and an audience keen to learn the tricks no one else tells you.

Frequently Asked Questions

Q: My image still appears above or below the text on mobile, not next to it. What’s going on?
A: This is intentional. Squarespace re-stacks for readability on smaller screens. For special layouts, use hidden blocks or duplicate sections to show mobile-specific arrangements.

Q: Can I wrap text around irregularly shaped images (like circles or transparent PNGs)?
A: Not directly. Squarespace treats all images as rectangles, even if they appear circular. For more advanced wraps, edit your images in a tool like Canva or Photoshop with padding built in, then use the same drag-and-drop steps above.

Q: How can I prevent the text from squashing up against my image?
A: Adjust the column padding or spacing inside Fluid Engine. You can also insert invisible ‘Spacer’ blocks to create custom gaps, which is much cleaner than trying to pad with white spaces in the text.

Q: I made a mess; things have floated halfway off-screen. How do I fix it?
A: Delete the misbehaving blocks, refresh the editor, and re-add. Fluid Engine sometimes glitches with snap-to-grid if blocks are dragged too quickly or at odd angles.

Q: Are Summary Blocks and Galleries involved in image wraps?
A: They are not. You can use galleries or summary blocks for more complex layouts, like news feeds or product overviews, and mix in text wraps around individual image blocks elsewhere for a varied, dynamic site.

Ready to take your Squarespace skills one step further?
Join our growing community for step-by-step tutorials, live Q&As, and real-life troubleshooting at Pixelhaze Academy.

Happy wrapping,
Elwyn