Archived topic
Post Archive grid column height equal and button block anchored to the bottom
4 replies · Started by Jason on November 8, 2022
There are many topics on this, and I've been through most of them. I just keep missing some key component, and for some reason none of them are working for me... Forgive me for opening another topic on this - I have a custom post archive that is 3 columns. I need all columns to be the same height and the buttons block to be anchored to the bottom. Thank you for your time
Hi Jason,
In order to make the CSS simpler, it's better to change your current structure which is:
- container
-- container
--- container (bg image)
-- container
--- Headline (h3)
--- link
--- Headline (p)
--- container
--- buttonsto:
- container
-- container
--- container (bg image)
-- container
--- Headline (h3)
--- link
--- Headline (p)
--- container
-- container
--- buttonsThen add this CSS:
.generate-columns-container .dynamic-content-template > .gb-container>.gb-inside-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.generate-columns-container .dynamic-content-template, .dynamic-content-template > .gb-container {
display: flex;
}
.generate-columns-container .dynamic-content-template > .gb-contaienr >.gb-inside-container >*:last-child {
margin-top: auto;
}
Ying, you are crushing it for me, today. thank you So much! One thing - your method works, but it brings the other blocks down in the container down - perhaps the "justify-content" attribute? How would I keep all the blocks towards the top of the container and the button block on the bottom? Thank you
Never mind - This result is perfect and I'm moving on. Thank you again! Really appreciate your help!! You guys rock
Glad to hear that :)
