Jump to content

Getting Square Images - all same size

Recommended Posts

Site URL: https://www.passifloranm.com/

Hi All -

I made the mistake of deleting one of the image squares at the bottom of this page -and now I can't seem to add it back in and retain all images being an equal size - I could add all new image blocks, but for some reason they are all elongated instead of square. See Attached image - the first is what I want it to look like, the second is where I am, the third is what the added image block looks like.934079257_ScreenShot2021-01-13at3_10_21PM.thumb.png.10fb3a0db4788ccb114ff8814a2a3ab9.png415069312_ScreenShot2021-01-13at3_10_26PM.thumb.png.2f7baa1a1c2665dc9fbc19d5861553df.png1429597848_ScreenShot2021-01-13at3_15_44PM.thumb.png.beac638a3805d2b74f6c62abb3b80883.png

Link to comment

Could you use a gallery section so all the image are cropped properly?

If you still want to use image blocks, use this snippet in Design->Custom CSS to make sure all squared

#block-yui_3_17_2_1_1544050274466_8037 + .row .sqs-block-image .image-block-outer-wrapper.image-block-v2 a {
  padding-bottom: 100% !important;
}
#block-yui_3_17_2_1_1544050274466_8037 + .row .sqs-block-image .image-block-outer-wrapper.image-block-v2 a img {
  left: 0 !important;
  top: 0 !important;
  width: 100%  !important;
  height: 100%  !important;
  object-fit: cover  !important;
}

image.thumb.png.3061aded7f00c68ee3d690e377968386.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 year later...

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.