Text Wrapping Around Image in Squarespace
Wrap some text around an image that works on desktop, mobile, and Squarespace Fluid Engine.
In website-land, “Text Wrapping” is the phrase we use when text wraps around an image, like this:
While this is possible to do using Classic Editor sections (just click and drag an image over a text block) it’s not possible with the new Fluid Engine sections. Additionally, even with Classic Editor, text wrapping isn’t possible on mobile.
So in today’s tutorial, we’ll create some simple text wrapping code that works on desktop, mobile, and fluid engine.
#Overview
For this example, we’re going to building an “About Me” section like where the text wraps around an image. Specifically, we’ll build the below layout, where the image is on the left side.
Additional Layouts
As part of my Code Curious membership, I have code snippets that will put the image on the left side, and a code snippets that will make the image sticky on desktop and wrap on mobile.
#Building the HTML
We’ll be using a Code Block* to create the HTML. The general outline for the HTML looks like this, a main container with two interior containers, one for the image and one for the text:
Main Container
Image Container
Text Container
Paste that into a code block in a section on your website.
#Add Your Imag
We’ll need to add our image using HTML, which means we’ll need the URL of the image we want to use. Follow these steps to get your image URL:
Navigate to your Asset Library
Upload the image you want to add if it’s not there already
Right click on the image you want to add and hit “Copy Image Address”.
Paste the URL between double quotes in the HTML from above
#Add your Text
To create your text, you’ll need to use HTML. If you’re unfamiliar with HTML, this is probably the most tricky part of this tutorial.
If you just paste in the raw text in the HTML between the <div class="text-wrap--text"> … </div> elements without any HTML formatting, it will present as one long paragraph, even if you have line breaks in the code.
To create paragraphs, wrap each paragraph with <p> … </p> tags. Replace the p with h1, h2, h3, h4 to use a heading style.
important
Be sure that if you open up an element, like this <p>, you close it at the end of a text, like this </p>. If I’m using a header style 2 <h2>, I would need to close it like this </h2>.
In the example below, I’m using 5 paragraph styles <p>. Scroll to the far right to see how I closed each paragraph with </p>
#Text Wrapping
Now that our HTML is setup, we need to use some CSS to target the text-wrap--image container and the text-wrap--text container to create the wrapping effect.
The core property here is float which will make the image “float” on the left side and the text wrap around it. I’ve added in a max-width so the image doesn’t get larger than 300px on desktop, and a general width so the image stays at 50% on mobile. I’ve also thrown in some padding to make give the text some breathing room.
If you use the final code below, I’ve added in some variables to allow you adjust the layout more easily.
#More Layouts
Join my Code Curious membership for a right aligned text wrapping code and a sticky-on-desktop-wrapped-on-mobile version of this code (like below), plus many more code snippets, tutorials, and professional website building resources.
#Final Code
Paste this into a Code Block*. Replace the Image_Url using and the paragraph text in the HTML.
Paste this into your Design » Custom CSS area.
* Use a Markdown Block if you’re on a personal plan, be sure to remove comments.
Related Code Snippets
The below Code Snippets are available to Code Curious members.
