Jump to content

Image Block Design - Collage Style - Bottom Overlap?

Recommended Posts


I would like to have image blocks with the Collage style overlapping the bottom (example image attached), but the the image design only has options for left or right aligned boxes. I would also like the text within the collage box to be centred.

I have seen code on here for changing the background colour of the collage box backgrounds, but is it also possible to set the roundedness of the corners of the collage boxes - like we can now do with images?

Many Thanks, Jen

Screenshot 2022-01-01 at 14.46.43.png

Link to comment




CSS code (make sure to edit your data-section-id)
You can use the Squarespace ID Finder Chrome Extension

//Image block collage vertical instead of image and text left/right
  .sqs-block-image .design-layout-collage:not(.sqs-narrow-width){
       > div {
        width:100% !important;

  margin-top: -6%;
justify-content: center;


.sqs-block-image .design-layout-collage .image-card > *{
   text-align:center !important;

//mobile fix 1
  .sqs-block-image .design-layout-collage.sqs-narrow-width .intrinsic{
    width:100% !important;

//mobile fix 2
  .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper{
margin:auto !important;
    width:100% !important;
//mobile fix 3
    > div{
      width: 90% !important;

.sqs-block-image .design-layout-collage:not(.sqs-narrow-width).image-position-left .image-card{
  width: 90% !important;


The CSS could be cleaned up a lot, but this'll push you in the right direction 🙂

p.s.  I'm also available for freelancing.

Edited by codeandtonic

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.