Custom Portfolio Grid

Site URL: https://watermelon-tomato-em22.squarespace.com/

Hello, 

The layout on my portfolio homepage is currently set to Grid: Overlay with 3 Columns. I'm wanting to customize this so that the size of the thumbnails vary in my grid.

This site is a good reference of what I'm trying to accomplish and I've attached a comp of what I'm hoping I can make mine look like.

My knowledge of CSS is limited so any help is very much appreciated.

Thank you!
Robert

7 hours ago, tuanphan said:

Actually if you know CSS, you will also spend a lot of time trying CSS to achieve the above layout.

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
a.grid-item:nth-child(1), a.grid-item:nth-child(7) {
    grid-column:~"1 / 4";
}
a.grid-item:nth-child(2), a.grid-item:nth-child(2) .grid-image {
    grid-row: ~"2 / 4";
    padding-bottom: 133% !important;
}
}

 

Thank you! This worked great for the most part – are you able to help me with getting the desired effect on the bottom portion?

Last question related to this: how can I adjust the height of the thumbnail in the rows with only one project? Ideally those would be shorter and match the height of the two smaller rows (reference attached) so that visitors of my site see a hint of more than just one project above the fold.

Really appreciate your support! This is my first time using this help forum and it's proven incredibly helpful.

– Robert

 

Hi,

I see you figured it out.

To adjust height of big image, use this CSS

@media screen and (min-width:992px) {
a.grid-item:nth-child(1), a.grid-item:nth-child(7), a.grid-item:nth-child(1) .grid-image, a.grid-item:nth-child(7) .grid-image {
    padding-bottom: 30% !important;
}
}

On 6/15/2022 at 7:25 PM, tuanphan said:

Hi,

I see you figured it out.

To adjust height of big image, use this CSS

@media screen and (min-width:992px) {
a.grid-item:nth-child(1), a.grid-item:nth-child(7), a.grid-item:nth-child(1) .grid-image, a.grid-item:nth-child(7) .grid-image {
    padding-bottom: 30% !important;
}
}

 

You're the best! Thank you!