Remove Image Margins in Squarespace
How to customise your images in Squarespace
When I first started using Squarespace, after a decade of building websites with Wordpress, I thought it would be a lot more restrictive in terms of design capabilities. At the time I weighed up the pros and cons and decided it was still worth moving over to Squarespace as I had become frustrated with the tech issues related to Wordpress, as well as the maintenance and plugin compatibility dance that I felt was sapping my creativity and design focus.
However, I realised pretty quickly that Squarespace is not only a robust and elegant interface, but is also able to meet all of my design requirements by allowing me to implement straight-forward custom code, CSS and plugins.
Today, I thought I would share a very simple solution to allow you to customise the margins and padding on images. This is a super simple method but I have described it in a lot of detail in case you are new to Squarespace. Read on to find out more…
This screenshot from the “About” page of my website shows the image touching the side of the screen without any margin or padding.
Simple CSS to elevate your design
Here are the steps to achieve this look on your own website and break away from the default template look:
01. Download this chrome extension
The first thing you are going to do is to use a Chrome extension which will help you identify the ID block (image) you want to target. Add the extension here and allow it to remain in your extensions. It’s not annoying and you won’t get any pop-ups!
02. Design your page
Design your page in Squarespace. Here I have used a text block on the left, spacer blocks to control the design, and an image block:
03. Identify the correct block
Save your changes, and go into “Preview” mode. Then click the “Block Identifier” icon in your Chrome Exntensions. It will often come up with a notice asking you to reload the page first. So once the page has refreshed, just click the icon again.
The page will then pop up with code boxes, showing each block ID on the page. Identify the block that is relating to your image and make a note of the code, then click the Block Identifier icon to turn it off.
04. Edit the code
Next, make a note of the following CSS:
#block-6f2d88befd151db6351e
{margin-top:-10px;
margin-right: -80px;
margin-bottom:-15px;
z-index:99;}
Replace the first line of CSS where is starts “#block-” with your own block ID you just made a note of.
05. Insert the code
Head over to your Squarespace Dashboard to Design - Custom CSS. Insert the code here and click save. And you’re done!
I have adjusted the image margin on the right by telling it to go "-80px”. If your image was on the left-hand side, just swap out the word “right” for “left”. You can also adjust the number -80 and play around until the image no longer has a margin and instead sits neatly right up to the page margin.
Try it out! A very simple, easy bit of CSS to elevate your website and create a more customised effect where you want to add a little impact.
Hope you found this helpful and there are many ways you can tweak this code to further customise your image blocks.