Add margin to equally distributed columns without pushing last one to the next

This topic contains 1 reply, has 2 voices, and was last updated by  Sebastian 3 months ago.

Author Posts

balticsamurai

I’ve added beautiful shadow using a custom class and Mircrothemer to all equally distributed columns (Beaver Builder) but can’t figure out how to add some gap. If I add 5px margin on both sides, last column moves to the next row.

Here’s a screenshot: https://www.awesomescreenshot.com/image/3932844/ef98bf0724ff09b505d68953565a8044

Please help.


Sebastian

Hey,

The issue here is probably that the width + margin of the 5 columns adds up to more than 100% of the row width. One way to handle this could be to set the width and margin both as percentages. 19% width and 1% right margin. Or 19% width and 1.25% right margin, but create an extra selector to target the last column so you can set margin-right to zero.

Another approach would be to use flexbox. Set display: flex on the immediate parent of the columns and set the justify-content property to space-between. That will evenly space the columns, but they will still be flush against the left and right edges of the container element. You will need to set the width of the 5 columns to less than 20% of course, to create space.

Would either of those solutions work for you?

Cheers,
Sebastian

You must login or register to reply to this topic.