SOLVED: Faulty margins of root container and page

Bugs
1

Bricks Version: 1.3.7
Browser: Chrome 99
OS: macOS

The margins of a root container doesn’t seem to work properly. Not margins for page either. See screenshots below.

Btw, the issue applies to both the use case below with header to the left and when it’s not there.

No margins applied.

no-margins-screenshot
no-margins-screenshot1920Ă—1001 93.6 KB

Margin 1 em on all sides of container.

container-margins-screenshot
container-margins-screenshot1920Ă—1001 95 KB

Margin 1 em on all sides of page.

page-margins-screenshot
page-margins-screenshot1920Ă—1001 98.8 KB

Not a big issue for me personally, just wanted to report it. :slight_smile:

Edit: I first thought the issue only happened when the header was left or right aligned but then I realised that the same thing happened when the header was not there so I made an edit the post to also include that use case as well.

2

Hi Robin,

thanks a lot for your report! I think the margin works but interferes with the “fixed” width of the container. To make it work properly, you have to calculate the width of the container subtracted by the margins on both sides (using the calc function for example).

Unfortunately, this is one of the disadvantages that our container layout has. Margin, unlike padding, is always added to the width - and I think that’s the basic problem.

Best regards,
timmse

3

Hi timmse, thanks for taking the time to answer!

Ah you’re probably right about that. A more accurate description of the issue might be “Unexpected width of root container and page when adding margins”. The expected behaviour as a user, for me at least, would be that it would adjust the width because it shouldn’t add margins so it pushes the content past the viewports width.

Thanks for the suggested solution!

For anyone looking at this thread the solution to this issue atm is:

Step 1: Make sure Content > “Align container” option of your container is not set to anything.
Step 2: Go to Style > Code > Custom CSS and write

root {
  width: calc(100% - 2em);
}

Where 2em is the sum of the right and left margin of my example above. So change that part for the margins you have chosen.

1 Like