How To Set Container Gap

How To
1

Bricks Version: 1.2
Browser: Firefox (latest)
OS: OSX Big SUr
URL: Local host

Setup…

Parent container.
Inner container split 50/50

Adding column gap to the parent container adds pixels to the right ofg the left column forcing the right column outside of the parent container.

Screenshot 2021-05-20 at 10.53.42
Screenshot 2021-05-20 at 10.53.421121Ă—800 103 KB

The same happens when adding left and right margin to the inner columns.

2

Hi @SimonG It’s not so much of a bug, as this is how flexbox works. There are multiple ways to accomplish this sort of “column” gap:

  1. Remove the width settings from your inner containers and then set the margin-left/right of one of the inner containers (not recommended)

  2. Set inner container padding-left/right values. Might or might not work well depending on column backgrounds, etc.

  3. Set the “Column Gap” when editing the outer container without any inner container widths. Easy, but not for max. browser support.

  4. Set the inner container width to something like 49% and set the “Justify Content” setting of the outer container to “Space between” (desired result with best browser support).

Hope this helps,
Thomas