Stopping portfolio page thumbnails from getting cropped in Squarespace 7.1

• 00
• 01
• 02
• 99

So, let’s be honest.

This is not a “normal” issue. In most cases it isn’t even a thing!

However, if you’re using a portfolio page in 7.1 – for your client’s site or your own – to display art in different ratios, logos you’ve created or any other kind of visuals that should NOT be cropped, you may be a little bit frustrated after realizing there’s no “Auto” ratio available.

If that’s the situation you’re dealing with then you’re in luck!

Because today, we’ll be looking into how we can manually create that “Auto” image ratio for the portfolio thumbnails with just a couple of lines of CSS.

Ready? Then let’s get to it!

Tutorial

Overview & timestamps

Three lines of code. That’s basically what we’ll be using to create that “Auto” aspect ratio for portfolio images.

However, before we get to that, we’ll be breaking down the reason why we need to change what we need to change:

1. 00:00 - Intro

2. 01:20 - Overview of the cropping problem

   First thing’s first, we’ll take a couple of minutes to look into what the problem is with the native options, and where the problematic value is located inside the HTML of the portfolio page.

3. 03:57 - Targeting the corresponding container for the Grid: Simple portfolio layout

   Once we locate the issue, we’ll create our own selector to target the corresponding container for the Grid: Simple version of the layout. As always, the classes we pick will need to reflect how we want to narrow things down to make sure nothing else gets modified.

4. 06:08 - Checking out mobile

   Before calling it a day, we’ll take a quick look at mobile and see if we need to modify anything to make sure everything looks as good as possible. Luckily, we’ll simply need to make a section adjustment to do so.

5. 07:34 - Adapting the code for the Grid: Overlay portfolio layout

   Last but not least, we’ll apply the same code to the Grid: Overlay layout and check out, inside the Inspect Element tool, why the code isn’t working and what parts of it need to be adjusted to have it fully functional again.

And just like that, now your portfolio page thumbnails won’t get cropped anymore!

Cool, right? Hope you found this CSS trick helpful!

Until next time,

B.

---

Full code

Grid: Simple layout

/*STOPPING PORTFOLIO PAGE THUMBNAILS FROM GETTING CROPPED IN SQUARESPACE 7.1 (GRID: SIMPLE)*/
.portfolio-grid-basic .grid-image img {
  object-fit: contain !important;
}

Grid: Overlay layout

/*STOPPING PORTFOLIO PAGE THUMBNAILS FROM GETTING CROPPED IN SQUARESPACE 7.1 (GRID: OVERLAY)*/
.portfolio-grid-overlay .grid-image img {
  object-fit: contain !important;
}