SOLVED: Global Width of the container element

Bricks Version: 1.5 beta
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: (a link to a page that illustrates the issue would be really helpful)

[Please describe in as much detail as possible how we can replicate this bug]

Hey Guys,

When you set the global container width in theme settings, it sets the container’s width instead of max-width. That may leads to responsive issues if max-width is not set as 100% (or less).
So let’s say I set the global container width to 1440px. If I resize the browser to 1200px, it will overflow on the left and right instead of matching 100% of the container.

I believe we should have a:

  • width
  • max-width
  • min-width

in the theme settings → element Container & Div so that would fix the issue.

3 Likes

Hi Maxime,
Thanks so much for your report!

The container in Bricks has (since the introduction of max- and min-width settings) - like every other element - always worked with width instead of max-width. Why should this cause a problem now? The max-width of the container (and any other .brxe element) is 100% by default, so it takes effect as soon as the width of the container is below the actual width.

I set the container width to 3500px as a test, which is definitely wider than the resolution of my 13" MacBook (2560px) and should create an overflow at the latest with Developer Tools turned on - but it doesn’t.

Best regards,
timmse

Sorry @timmse I forgot to update this thread yesterday. I figured out that I had a fixed max-width set to my container and that was the cause of the overflow. Tho I still believe that the best way to deal with global settings for containers, div, etc… is to be able to add width, min-width and max-width values. I believe that @thomas mentioned on the FB group that this feature will be added in 1.5.

1 Like

Hey Maxime,
no Problem. I just talked to Thomas again: it’s in the works as Thomas announced, but hasn’t made it into beta yet :v:

1 Like

Marking this one as solved as width, min-width, and max-width theme style settings have been added to the “Element - Container” in 1.5-rc.

2 Likes