Blog Summary Page Width (Side by Side Blog)

Hi.

probably easier if you give the site url (and if necessary a password to access it).

I think I know what you mean though. It's quite annoying but they use a different box sizing model for the blog page (side-by-side, grid etc) than they use for most other sections. what this really means is that the padding of the section is included when setting the maximum width in the blog sections where as in most other sections it is not, meaning you get an offset.

you could fix this by changing the box-sizing model on the collection but that will probably have some adverse effects on the images, so I think the best way to do this is to change the max-width setting on your collection to expand to take into account the padding. this in itself has a couple of gotchas in that the max-width of your site is fixed in pixels but the padding is relative to the viewport size so you need to use a css calculation for this. the problem with that is that Squarespace's Custom CSS section doesn't really like calcs (because it's a LESS compiler not 'pure' css) so you have to do something a little odd to make sure it gets it right.

what we're looking to do here is expand the max width of the collection wrapper to add on the "gutter" (the left and right padding). these two things are exposed as css variables so you should find that adding this will do what you want. (i've defaulted these variables to 1000px and 3vw, but they won't be used if your site has different settings). this also is set only to apply to blog-side-by-side but if you removed that ".blog-side-by-side" this would also fix the grid layout, or the portfolio layout for example which has the same problem.

.page-section .collection-content-wrapper.blog-side-by-side {
  max-width:calc(~"var(--sqs-site-max-width,1000px) + calc(2 * var(--sqs-site-gutter,3vw))")
}

if that isn't what you mean then post the url and password and show us! you could of course, just use the code above remove all the calc stuff and fix the width yourself but you might find it changes as you resize the window...

see here, the green is the padding and is included in the width calc (hitting the max-size of 1000px), note how the section lines up with the paragraph's text in the section above (even though that also has some padding - but the padding on that is ignored because it has a different box-sizing model as mentioned above)

when you apply the calc, the padding is pushed beyond the size so that the content is what maxes out at 1000px (the actual wrapper ends up wider by the variable gutter size - 1077 at this viewport width)