Jump to content
Go to solution Solved by tuanphan,

Recommended Posts

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

Screen-Shot-2022-06-13-at-1.41.46-PM.jpg

Screen-Shot-2022-06-13-at-1.40.45-PM.jpg

Link to comment
  • Solution

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

 

Screen Shot 2022-06-14 at 12.04.55 PM.png

Screen-Shot-2022-06-14-at-1.21.53-PM.jpg

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

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.