Jump to content

Portfolio grid "custom" image placement

Go to solution Solved by Ziggy,

Recommended Posts

Hi awesome Squarespace forum-reading-and-helping people.

I'm new to the game, heck some might even call me a noob. I mean, most people would actually call me a noob because I am one. Anyways - I was hoping you beautiful people could help me with something. 

I'm currently using the classic grid portfolio template (see attached pic), and I love the hover effect and copy appearing. However I'd not perse the biggest fan of how the pictures align perfectly with each other. So here is my question.

Is there a way to change the way the images align while still keeping the hover effect? I've added another screenshot of how ideally I'd like it to look.

Hope you peeps can help.

Screenshot 2023-02-17 at 10.11.08.png

Screenshot 2023-02-17 at 10.13.57.png

Link to comment
  • Solution

This is pretty tricky to do, the images are not in columns, they are individual items in a grid, so I can't just push down all of the ones on the left.

That said, here's a slightly hack way to maybe get the look you want?

Add this to Custom CSS:

@media only screen and (min-width:768px) {
  .grid-item:nth-child(odd) {
    margin-top:42px;
  }
  .grid-item:nth-child(even) {
    margin-top:-42px;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, nsk2023 said:

Never mind i fixed it myself inside the EDIT and then spacing.

Just what I was going to suggest!

Can you mark my post as the solution and give it a thumbs up? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.