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;


BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.