Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom Portfolio Grid


lordbladdemere

Question

Site URL: https://seanhdesigns.squarespace.com/

I'm looking to create a custom portfolio grid with hover overlay. 

I would like to have a single full bleed thumbnail with 2 underneath repeating, like on this website. www.wilsuncheung.com

I can't for the life of me figure out how to do it and I think I need to use custom CSS but I'm not sure what to put in. 

The password for my site is: Tourburner1

Thanks for all the help!

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: https://seanhdesigns.squarespace.com/ I'm looking to create a custom portfolio grid with hover overlay.  I would like to have a single full bleed thumbnail with 2 underneath repeating, 

Hi again! Thanks for the help. I tried it in Design -> Custom CSS but it didn't update in there.  I also tried in Advanced -> Custom Code for my portfolio and nothing there either. 

Posted Images

9 answers to this question

Recommended Posts

  • 1
1 hour ago, lordbladdemere said:

Site URL: https://seanhdesigns.squarespace.com/

I'm looking to create a custom portfolio grid with hover overlay. 

I would like to have a single full bleed thumbnail with 2 underneath repeating, like on this website. www.wilsuncheung.com

I can't for the life of me figure out how to do it and I think I need to use custom CSS but I'm not sure what to put in. 

The password for my site is: Tourburner1

Thanks for all the help!

You can use this snippet in Design->Custom CSS
 

section[data-section-id="5ff83756253dc14f1abc44c2"] .grid-item:nth-child(3n) {
    grid-column: 1 / 3;
    padding-bottom: 37.5% !important;
}

Note that the image ratio is now longer than the old ones, you may need to change the background image to crop it properly

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 1
10 hours ago, lordbladdemere said:

Hey @Bangank36

Thanks so much for the help mate! I'm not sure If I correctly put in the code snippet as I didn't see any updates happen once I had in it. 

Can you please help me if you have time. 

Thank you!

Have you put it into Design->Custom css?

 

image.thumb.png.e1680d4514e7c6813b392e72dbb0232e.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 1

I am seeing the same page with you? the portfolio grid in my screenshot is your homepage, what is yours url

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 1
19 hours ago, lordbladdemere said:

The only thing that has changed for me on the homepage so far is the hover overlay of the projects. 

 

Screenshot 2021-01-11 at 14.06.44.png

is this not what you like? this is the only grid i found on homepage

image.png.0c1cfd0e0e0067cb3582348f3509ee65.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
14 hours ago, bangank36 said:

section[data-section-id="5ff83756253dc14f1abc44c2"] .grid-item:nth-child(3n) { grid-column: 1 / 3; padding-bottom: 37.5% !important; }

Hey @Bangank36

Thanks so much for the help mate! I'm not sure If I correctly put in the code snippet as I didn't see any updates happen once I had in it. 

Can you please help me if you have time. 

Thank you!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...