The problem with Fluid Engine

Here's the problem: If you set your images to "Fit" you can't align them. If you align them vertically, the horizontal spacing will be off. If you align them horizontally the vertical spacing will be off. (see attached).

If you set the image to "Fill" instead of "Fit", your images will be cropped very badly across different devices.

It seems the only work around is to create your images to the exact specifications of your chosen fluid engine grid. This requires a huge amount of effort as it means redoing ALL your images and measuring all those little rectangles of the grid. It would be VERY helpful if Squarespace provided some way of measuring! 

Maybe there's a way to remove the extra space on the top and bottom of the image frames?

Does anyone know of any way to fix the horizontal spacing when there are stacked images set to "fit"???

Heeelllpppp!!!!!!! thanks 🙂

a few das ago I faced with same problems, I provide 2 options to solve it

#1. Use Classic Editor Section

#2. Use CSS code. If you share link to page where you have problem, we can give code easier

@tuanphan here's one of the pages https://www.martiandesign.com/work/andromeda

 but all the pages on the site have the same issue

Classic editor is not a good option because I would have to use "spacers" which creates weird spacing on mobile

Since you're a Circle member you can access the "old" gallery block, which would allow you to have these multiple photos with even gaps without cropping.

@Ziggy Do you mean the "Classic Editor"? If so, that opens up a lot of other issues

Just now, Martian said:

Do you mean the "Classic Editor"? If so, that opens up a lot of other issues

No, I mean the Gallery Block, you can find it in the new block menu along with all of the other blocks.

@Ziggy the problem with that is I also have text blocks between some of the images. I think I need a CSS solution 😕

I think that using:

gallery + TEXT + gallery

will work better than this or adding Custom CSS:

image + image + image + image + image + TEXT  + image + image + image

@Ziggy I'm still not sure where to get the "old" gallery block 😕

Do you not see it:

I see it , let me try it

@Ziggy I tried it but I can't get the sides to align (attached)

What do you mean? You can resize it the same as any other block.

@Ziggy you can't get the left/right side of the top image to lign up with the left/right of the bottom image Also, in some case I have two images (or an image and video ) side by side

@Ziggy ok, so I created a "stacked" image gallery (and added space between the images with custom CSS)  and think that's a very interesting solve and helps with a lot of the problem. however, I also have videos (native squarespace vids) which can't be put in that gallery block and also have images side by side which can't be put in there either. Thanks Ziggy!

21 minutes ago, Martian said:

images side by side

Use the grid instead of stacked.

Videos are more tricky, but worth careful treatment these techniques together should overall improve the look.

@Ziggy unfortunately I have images side by side with video as well.I wonder if there is any way to add Squarespace native video to the gallery blocks? I doubt it 😕