How do I maintain image aspect ratio AND padding between images consistent for ALL screen sizes?

I'm a branding/design professional working on building a new portfolio site on Squarespace. It is not published yet because I am trying to get it buttoned up before making public. But for reference I'm trying to get it to function a lot like this other creative portfolio site: https://center.design/project/unitedsodas/

I've opted out of using a Gallery blocks or Portfolio pages because, from my past experience, those do not allow the creative freedom I need to create each portfolio piece with different image sizes and layout. Instead, I am creating a blank page for each 'project' and adding individual image blocks. 

I've gotten to the point where I'm happy with it in Desktop and Mobile. However when I reduce the screen size to somewhere in the middle, or tablet size, the images start to get cut-off (if the image style is set to 'fill'), or the spacing between images is off (if the image style is set to 'fit'). When the images are set to 'fill', they maintain the padding but then the image content gets cut off. But if the images are set to 'fit' they maintain aspect and don't get cut-off, however the spacing between images gets uneven.

Below are screen shots of the desktop and mobile layouts when images are set to 'fit'. I have set my padding to be around 20px between the images and the site margins. 

However, see below, when I start resizing somewhere in the middle/tablet size, the spacing gets weird:

Is there a way where I can keep BOTH the aspect ratio AND the consistent 20px padding, no matter the size of the screen?

I'm open to using custom code. Please help!

up, i have a similar problem in  7.1 -> https://patrycjahelenabielawska.squarespace.com/
 

it's supposed to look like this:



but on smaller screens looks like this:

on mobile version the space between paired pictures disappears and looks terrible.

on top of that the mobie version shown in the dashboard is different than the mobile version in reality. mobile in dashboard:

mobile on actual mobile:

in reality the gaps between each pair is bigger and randomly some tiny spacing appears between pictures within a pair

> any suggestion for a fix with blank page with image blocks?

> using a gallery is not an option as for 2 columns even with inset setting the pictures are too big for a laptop screen and i want visitors to see the pictures in full at once without scrolling. unless some code magic could solve too big images in the gallery?

 

up; anyone able to help with that? 🙏

I have the same problem

This seems to elementary...I'm a bit surprised squarespace makes this an issue....!! 

And there are no resources to solve this. I'm going to try and move to wordpress as I do not see a solution 

Has anyone found a workaround for this? Really frustrating. Thanks all.

Solution:

1. Create new section as a regular image gallery (simple:gallery)

2. Upload one or multiple images to the gallery

3. Go to 'Edit Section'

4. Set gallery to 'grid:simple'

5. Set width to 'full bleed'

6. Set desired aspect ratio

7. Set Gallery to 1 column

5. Set desired padding

6. Save

This will keep aspect ratio and desired padding consistent while scaling your browser

It's a huge problem and a common one everyone is having sadly. My sites look so different (terrible) across 13" screen Vs a 27" screen. I hate it so much.

I have a similar issue too especially with code blocks or images containing text. It's either going to have large vertical padding on narrow screens or large horizontal padding on wide screens, making the content smaller and harder to see. In both cases, space is wasted. But when the content is hard to see, that is much worse than just wasted space IMO, so I optimize for the wide screens and just settle for the ugly extra vertical space.