Jump to content

How to contain the image in the portfolio grid

Go to solution Solved by beatrizc,

Recommended Posts

Hello, 

Would someone know the CSS code to contain the images in the Portfolio simple or Overlay? The default is

object-fit : cover;

I tried the following without any success, what am I missing =? 

#grid-image-inner-wrapper img {
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
      object-fit: contain !important;
}

Thank you !

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

On 1/8/2023 at 6:57 PM, tuanphan said:

"contain the image" - Can you explain this?

And what is your site url?

 

I want the images illustrating the logos to be contained in the containers. As of now the images are covering the container and is clipped. 

Thank you!

 

Edited by Anco326
Link to comment
  • Solution

Hey @Anco326!

From what I can see, the grid-image-inner-wrapper is a class, not an ID.

So, if you modify the selector slightly in your code and use a period instead of a pound sign, you should be set!

.grid-image-inner-wrapper img {
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    object-fit: contain !important;
}

Hope that helps!

Squarespace Customization Geek | Helping fellow designers code the heck out of Squarespace

☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for.

☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects.

☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch!

 

Website | Youtube | Facebook | Pinterest

Link to comment

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.