The align content option in the container (bricks builder does not have this option.)

Feature Requests / Improvements
1

Hi bricks team!

Before describing the request, please do the following steps.

1- Create a container with the desired height, for example 400Px.
2- Enable wrap on this container and set the Column gap in this container to 10 Px.
3- In order to create something like this, add a heading widget and two button widgets inside this container.
4- Set the width of the heading widget to 100% and center its text.

After doing the above steps, you will see that there is a big gap between the heading and the two buttons : Screenshot by Lightshot

As far as I know, at bricks we have no control over this situation. except by using another additional container. This does not seem like an optimal way.

But in Elementor, when we enable wrap in the container, a new option called Align Content is added. Using this option, we can fully control the distance mentioned in the previous shot. So, wouldn’t it be better to add an option similar to align content in bricks container? Please watch the video below.

https://drive.google.com/file/d/1Xb44y8ohJqWhZPsSt5n0OvOMXoTMRXdA/view?usp=share_link

2

This is how you’d do it in Bricks. I wouldn’t recommed setting the 400px height, it’s better to use padding and the content to control the height, but I added it in the video to match what you had said.

1 Like
3

Hi @wplit , Thanks for the great video.
Yes, first of all, I agree with you that fixed height is not suitable and padding is a better option.
It seems like adding a div would be a principled way. But I had a question…
Why didn’t you use a block instead of a div? First you added the div and then you enabled the flex in it…

4

You could do it either way, my reason was that a block is going to take up 100% width of the container, which isn’t needed.

A block is just a div with extra CSS. If I know I won’t need that CSS, or will need to override it, i go for divs.

5

it’s true. Thank you again @wplit :clinking_glasses: