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!

Hi @tuanphan!
I was hoping if you could also help me create a custom grid for a portfolio page. At the moment I have a simple grid 2 columns but I would like to create something exactly like this link 

1 big rectangle then back to simple grid for 2 rows only ( the page example has 3) and again 1 big rectangle followed by 2 simple grid row

my website: www.kopi.studio
password: kopi2023

Thank you!

On 8/1/2023 at 3:38 PM, Tun said:

Hi @tuanphan!
I was hoping if you could also help me create a custom grid for a portfolio page. At the moment I have a simple grid 2 columns but I would like to create something exactly like this link 

1 big rectangle then back to simple grid for 2 rows only ( the page example has 3) and again 1 big rectangle followed by 2 simple grid row

my website: www.kopi.studio
password: kopi2023

Thank you!

Add this code to Design > Custom CSS

/* Custom Portfolio Page */
a.grid-item:first-child, a.grid-item:nth-child(6), a.grid-item:nth-child(11) {
    grid-column: ~"1 / 3" !important;
}

On 8/3/2023 at 11:24 AM, tuanphan said:

Add this code to Design > Custom CSS

/* Custom Portfolio Page */
a.grid-item:first-child, a.grid-item:nth-child(6), a.grid-item:nth-child(11) {
    grid-column: ~"1 / 3" !important;
}

 

It working thank you! 🙏

8 hours ago, Tun said:

It working thank you! 🙏

I updated the rule of code for many items in the future, you can see #3

Hey @tuanphan

I just notice it looks unbalanced on mobile version. Is it possible to remove the custom grid for mobile and keep it simple?

( attached screenshot)

Thank youuu

3 hours ago, Tun said:

Hey @tuanphan

I just notice it looks unbalanced on mobile version. Is it possible to remove the custom grid for mobile and keep it simple?

( attached screenshot)

Thank youuu

Which exact code did you add? We can tweak to make it run on desktop only

19 hours ago, tuanphan said:

Which exact code did you add? We can tweak to make it run on desktop only

@tuanphan I used the code below

/* Custom Portfolio Page */
a.grid-item:first-child, a.grid-item:nth-child(6), a.grid-item:nth-child(11) {
    grid-column: ~"1 / 3" !important;
}

On 8/25/2023 at 12:00 PM, Tun said:

@tuanphan I used the code below

/* Custom Portfolio Page */
a.grid-item:first-child, a.grid-item:nth-child(6), a.grid-item:nth-child(11) {
    grid-column: ~"1 / 3" !important;
}

Change it to

@media screen and (min-width:992px) {
/* Custom Portfolio Page */
a.grid-item:first-child, a.grid-item:nth-child(6), a.grid-item:nth-child(11) {
    grid-column: ~"1 / 3" !important;
}
}

@tuanphan It's working thank you!