Jump to content

Customizing portfolio layout

Recommended Posts

  • Replies 6
  • Views 586
  • Created
  • Last Reply

Top Posters In This Topic

On 4/7/2023 at 4:15 AM, chauncey_peppertooth said:

@tuanphan

https://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?

portfolio_stagger-02.png

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!)

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

image.png.3437e29ecbf6916370a48a1122da3449.png

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!)

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.