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
Tun Posted August 1 Share Posted August 1 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! Link to comment
tuanphan Posted August 3 Share Posted August 3 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; } 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
Tun Posted August 4 Share Posted August 4 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! 🙏 tuanphan 1 Link to comment
tuanphan Posted August 4 Share Posted August 4 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 Tun 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
Tun Posted August 24 Share Posted August 24 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 Link to comment
tuanphan Posted August 24 Share Posted August 24 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 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
Tun Posted August 25 Share Posted August 25 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; } Link to comment
tuanphan Posted August 27 Share Posted August 27 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; } } Tun 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
Tun Posted August 28 Share Posted August 28 @tuanphan It's working thank you! tuanphan 1 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