1.4 beta: Container width 100% - other adjustment than in 1.3.7

Bricks Version: 1.4 beta
Browser: Chrome 100

In 1.3.7 the inner Container (below Section container) was defined as 100% and this width was adjusted by defined screen width (eg. 1500px.)

Now under 1.4beta the inner container width with 100% adjusts on real screen width and NOT on defined desktop width (eg 1500px)

Link to version 1.3.7

Link to version 1.4beta

Thanx in advance for your engagement, understanding and your quick response.

I seem to have the same issue as well.

In v1.3.7 when it looked fine…

In v1.4 beta where it’s all stretched out…

Yes, same thing :slight_smile:

I think Bricks Team changed some generic settings (to what is 100% related), but I am not sure.
This is the outcome of some tests I did 2-3 weeks ago but do not remember what I did to temporarily fix it.

I wait now until 1.4 release before I investigate for update.

Hi guys,
Sorry, I completely overlooked this post.

We’ve changed the container default styles, to get one or the other problem with nested containers under control.

You need to tweak your structure a bit to make it work again:

Option 1
Use the prebuilt section layout ‘100’, which is exactly the same as option 2, but only 2 clicks away.

Option 2
Use flex-stretch and align-items: center on the outer container instead of width: 100% or 100vw.

Option 3
Keep the width: 100vw on the outer container, set it to align-items: center, and set a max-width of your desired container width to the inner container, that holds your elements.

Best regards,

Hi @timmse,

your Option2 only works, if I make definition of stretch in the container/section element itself.
If I use a class for it, that does NOT work.
This would mean, that I would have to touch each and every section container manually for update on 1.4.
Would be really helpful and more logic if I can use classes for this setting.

I also created a short Loom video to illustrate the problem.

Best regards

1 Like

@timmse , @thomas ,

same problem with 1.4rc2…, not solved yet

1 Like