How to create a full width image in a Squarespace blog post

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About this tutorial

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

When Fluid Engine was released in 2022, we all had hopes that blogs would get these sweet new editing features too! Unfortunately, they are still using the classic editor, but thanks to some clever CSS, we can still make them look awesome.

In this tutorial, we’ll be using custom code to make the first image in your blog post full-width, stretching from edge to edge.

This tutorial is a little thicker than a simple copy + paste because of one major thing: site margins. You can set a specific site margin in your website settings, and it might be different than mine, so be sure to watch the video so you’ll understand what part of this code you’ll need to change and how to do it.

---

Video tutorial

---

Code Example

Here is the code from this tutorial. Remember, it will apply to the first picture in your blog post, and you need to adjust the vw values for your site margin, both desktop & mobile!

.sqs-block-image:nth-child(1){
padding:0!important;
position:static;
width: 100vw;
}
@media only screen and(min-width: 768px){
.sqs-block-image:nth-child(1){
transform:translatex(-14vw)
}
}
@media only screen and(max-width: 768px){
.sqs-block-image:nth-child(1){
transform:translatex(-2vw)
}
}

---

Related Content

Here are links to a few other tutorials you can check out to customize your Squarespace blog even more:

• Brand new to CSS? Start with my free course here: insidethesquare.co/learn

• How to add a background image to a blog post in Squarespace 7.1

• How To Style Squarespace Blog Comments

• How to Customize Category Links in Squarespace

---