Wide images and narrow content on Squarespace

July 18, 2014

Lately, a few people have asked how I have my photographs and body text displaying at different widths. Instead of answering all of those inquiries via Twitter private message, I decided I’d go ahead and publish my solution here.

I use the Native template, and do use a Developer account to hack it, but these solutions should work for non-developers as well. I actually reached out to Eric Anderson, the man behind the template, for a bit of help here.

Note: these suggestions are all assuming you are using the Native template. There are likely other methods for other templates, but I can’t help you there. The reason for this is that we are going to leverage Native’s “Promoted Blog” feature. Normally, the template expands the first image in a blog post to span across the Site Width parameter. The rest of the post, including subsequent images, fit into Blog Content Width.

First, we check the Disable Promoted Blocks setting. “Why? Didn’t you just say we were going to leverage this feature?” Stay with me here: by disabling Promoted Blocks, there is no longer any differentiation between images based on their location in the post.

Next, we set the Blog Content Width (and the Site Width, ultimately) to the width we want all of our images to be at. For me, this is 1024px. Now,  everything is super-wide and looks pretty hideous.

The last piece is to add in a bit of custom CSS (for Developers, add this to general.css):

.collection-type-blog article
{
    header,
    .sqs-layout
    .row
    .sqs-col-12
    .sqs-block:not(.image-block),
    footer
    {
        max-width: 620px;
        margin-right: auto;
        margin-left: auto;
    }
}

Put simply, this code forces everything except image blocks to follow a max-width that you define in the code (mine here is 620px.)

From here, when you wish to change your image sizes, you can do that from the Style Editor alone, changing Blog Content Width, and when you wish to adjust your text content width, do that in the custom CSS.

This solution worked for me. If you have trouble implementing this, get in touch on Twitter or shoot me an email.