Stopping portfolio page thumbnails from getting cropped in Squarespace 7.1
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!
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:
00:00 - Intro
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.
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.
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.
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.