Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Image Block Design - Collage Style - Bottom Overlap?


JenIJW

Question

Hi,

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

3 answers to this question

Recommended Posts

  • 0

Demo

 

 

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
section[data-section-id="61d0db0d87d562059bf27d16"]{
  .sqs-block-image .design-layout-collage:not(.sqs-narrow-width){
    flex-direction:column;
align-items:center;
    .intrinsic{
      width:100%;
       > div {
        width:100% !important;
      }
    }

    .image-card-wrapper{
  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;
      margin:auto;
    }
  }



.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
video

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...