Best way to create a 4 "column" flex box to display service overview

[NuConnect]

Hey, I am still getting use to this theme and having a hard time find the combination of row, column, and which elements I am to use if I want to create 4 boxes side by side, that flexes or “stretch” to equal heights, each of these “div” would have a H3, a

and a button - I would like the button to align-self at the bottom…

Sorry for all the questions.

[christian]

Hey @NuConnect,

This would require some custom development. We’d like to give some guidance to help you get started so I’ll show you how to do it and give a code example. But, this would be your responsibility to enhance and fix if you encounter issues with it. Please see our Terms.

If we’re clear with what I’ve said above, please setup a section with 4 columns and in each, add a Headline element and a Button element (all V2 / non-Classic elements). Then, follow our Equal Height Columns guide. We’ll use this as a starting point.

Instead of using the CSS Alternative there, use the CSS below. As you can see, additional code has been added to make the button stick to the bottom of the column.

@media (min-width: 768px) {
	.equal-height .x-container {
		display: flex;
	}
	.equal-height .x-column {
		padding: 15px 15px 70px;
		text-align:center;
	}
	.equal-height .x-anchor-button {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform:translateX(-50%);
	}
}

You can see the whole process in this screen recording. Pause and play the video to follow along.

Hope that helps.

[NuConnect]

Works I went with something a little different, but similar.

[jade]

Glad to hear it helped.

Cheers!