chauncey_peppertooth Posted March 27, 2023 Posted March 27, 2023 Trying to figure out how to offset the portfolio columns, but can't figure it out. Would love to get a 70/30 split like the attached image. Any assistance would be greatly appreciated!!
TJC123 Posted March 28, 2023 Posted March 28, 2023 Bumping this topic as i'm also looking for it. Inspiration from this site: Morrama - Product Development | Industrial Design | London
tuanphan Posted April 2, 2023 Posted April 2, 2023 We can do this, but with custom CSS code. If you share link to portfolio page on your site, we can check code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
chauncey_peppertooth Posted April 6, 2023 Author Posted April 6, 2023 (edited) @tuanphanhttps://evngrgdsn.com/ there is some custom css in there now to sort of fake the effect, let me know what you're thinking! Edited April 6, 2023 by chauncey_peppertooth
tuanphan Posted April 8, 2023 Posted April 8, 2023 On 4/7/2023 at 4:15 AM, chauncey_peppertooth said: @tuanphanhttps://evngrgdsn.com/ there is some custom css in there now to sort of fake the effect, let me know what you're thinking! I see you current layout is 2 - 1 - 2 - 1... Do you still need help to change to this layout? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
chauncey_peppertooth Posted April 8, 2023 Author Posted April 8, 2023 @tuanphan Yes, please! I would rather have the stacked/staggered effect than the 2-1-2-1 split as it is
tuanphan Posted April 12, 2023 Posted April 12, 2023 On 4/9/2023 at 4:13 AM, chauncey_peppertooth said: @tuanphan Yes, please! I would rather have the stacked/staggered effect than the 2-1-2-1 split as it is Add to Design > Custom CSS div#gridThumbs { grid-template-columns: repeat(5,1fr) !important; } a.grid-item:nth-child(1), a.grid-item:nth-child(5) { grid-column: ~"1 / 4"; } a.grid-item:nth-child(2), a.grid-item:nth-child(6) { grid-column: ~"4 / 6"; } a.grid-item:nth-child(3) { grid-column: ~"1 / 3"; } a.grid-item:nth-child(4), a.grid-item:nth-child(6) { grid-column: ~"3 / 6"; } a.grid-item:nth-child(1) a.grid-item, a.grid-item:nth-child(1) .grid-image, a.grid-item:nth-child(4) a.grid-item, a.grid-item:nth-child(4) .grid-image, a.grid-item:nth-child(5) a.grid-item, a.grid-item:nth-child(5) .grid-image { padding-bottom: 50% !important; } a.grid-item:nth-child(2) a.grid-item, a.grid-item:nth-child(2) .grid-image, a.grid-item:nth-child(3) a.grid-item, a.grid-item:nth-child(3) .grid-image, a.grid-item:nth-child(6) a.grid-item, a.grid-item:nth-child(6) .grid-image { padding-bottom: 76.25% !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment