Robert-N Posted June 13, 2022 Share Posted June 13, 2022 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 Link to comment
Solution tuanphan Posted June 14, 2022 Solution Share Posted June 14, 2022 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; } } Robert-N 1 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
Robert-N Posted June 14, 2022 Author Share Posted June 14, 2022 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 Link to comment
tuanphan Posted June 16, 2022 Share Posted June 16, 2022 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; } } Robert-N 1 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
Robert-N Posted June 17, 2022 Author Share Posted June 17, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment