Align buttons to bottom

Author Posts

eno812 June 2, 2020 at 9:08 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Can you point me to some training or give me a start on how I can align the buttons on this page of my site Customerpath.com.au. It’s the next row under the hero row.

Sebastian June 3, 2020 at 12:14 pm

Hey, this is a tricky one due to the amount of nested flexbox divs. I tried a few things without success, and eventually landed on the following as a working solution. It involves creating a grid layout instead of flexbox, and then using absolute positioning to align the buttons at the bottom.

You need to create 3 custom selectors with the following styles:

.fl-node-5c382fe40eeac {
    display: grid;
    grid: auto / 1fr 1fr 1fr;
}

.fl-node-5c382fe40eee7 {
    width: 100%;
    position: relative;
    padding-bottom: 40px;
}

.fl-node-5c382fe40eeac .fl-cta-button {
    position: absolute;
    bottom: 0;
    width: 100%;
}

I hope that helps!

Cheers,
Sebastian

You must login or register to reply to this topic.