Equal vertical alignment of text/buttons within columns

Hi there, I have a simple 4 column layout in one of my page sections where there are images, text, and buttons. Right now, the first column has less heading text than the other three, which is making the button below it higher in just that one column. I know I could change just the bottom margin in that block as a temporary fix, but all the content may change from time to time. Is there a way to get the buttons to stay in the same alignment no matter how much text there is above them?

I know Flexbox automatically makes equal height columns, and I actually have the section flexing on tablet view so this problem isn't happening there, but for when I try to apply display:flex to the full screen view, it's not affecting how the columns look.

URL:  https://www.youbelongsd.com/welcome-ybh#home-learn-more

Thanks!

On 12/11/2022 at 1:16 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:901px) {
div#block-63769308103f8746b306de17+.row .span-3 {
    position: relative;
    flex: 1;
    padding-bottom: 100px;
}
div#block-63769308103f8746b306de17+.row {
    display: flex;
}
div#block-63769308103f8746b306de17+.row .button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 9999;
}
}

Thank you, this worked perfectly. You are a CSS wizard!

P.S. I am not familiar with ways you are using selectors in Squarespace. If you place "div" in front of a block id, you can use "+" to add classes of blocks beneath that first element? How does this work?

This has been one of my biggest headaches in Squarespace, because if I were coding from scratch, I would of course have this entire section in a div, but in Squarespace it is all separate blocks. Your method may save me from having to create custom code blocks all the time!

On 12/13/2022 at 4:09 AM, jinlikegold said:

Thank you, this worked perfectly. You are a CSS wizard!

P.S. I am not familiar with ways you are using selectors in Squarespace. If you place "div" in front of a block id, you can use "+" to add classes of blocks beneath that first element? How does this work?

This has been one of my biggest headaches in Squarespace, because if I were coding from scratch, I would of course have this entire section in a div, but in Squarespace it is all separate blocks. Your method may save me from having to create custom code blocks all the time!

Because the row has no id or class name, so I target block above the row

Reference: https://www.w3schools.com/cssref/css_selectors.php

I used this selector: https://www.w3schools.com/cssref/sel_element_pluss.php

@tuanphan Can I do the same for the buttons in a GALLERY Block to make sure that the buttons are always aligned at the same height? 

reference link: https://uptown.sydney/eat-and-drink

On 4/2/2024 at 8:59 AM, BUROM said:

@tuanphan Can I do the same for the buttons in a GALLERY Block to make sure that the buttons are always aligned at the same height? 

 

reference link: https://uptown.sydney/eat-and-drink

 

 

You can use this code to Website > Website Tools > Custom CSS

@media screen and (min-width:768px) {
.gallery-section .gallery-caption h3+p {
    min-height: 55px;
}
}

I see button lost top border, do you need to fix this?