Jump to content

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

Recommended Posts

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!

Link to comment

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

it's supposed to look like this:1.thumb.JPG.45df24ccb7675aee95998da77fb47d74.JPG


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?




Edited by patrycjahelena_
Link to comment
  • 3 weeks later...
  • 1 month later...
  • 2 months later...
  • 5 weeks later...


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


Link to comment
  • 2 months 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.