How to wrap text around an image in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
In Squarespace, you can add an image on top of a text block, but when it resizes everything gets changed! This tutorial will teach you how to wrap text around that image so it will look great on every size device.
Wrapping text around an image is a common design that makes it easy for a website visitor to see that the image is related to the content.
To create this wrapping text effect, you need to use a markdown block and some CSS. Keep in mind that if you are using more than one image inside a markdown block on your site, this code will add the same style to them all!
Here is the code from this tutorial.
Be sure to edit the float location and margin to suit your site style. If you are adding it to a single page, check out this tutorial for more info: https://insidethesquare.co/singlepage
.markdown-block img {
float: left;
margin-right: 15px;
}
One more thing, in this video, I’m using text from a free text generator full of Jeff Goldblum quotes - you can find it at https://jeffsum.com - I am not affiliated with this website or its creators, just a fan!
