Getting Square Images - all same size

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.

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;
}

@bangank36 Hi, i have the same problem.

I tried your code with different blocks without a good result. Which block do I need to insert in your code for it to work on my site?

https://www.jarnanaturbruksgymnasium.se/snabbval

Would you able to help me?