NO BUG: Is there a hidden/hard coded size for container widths?

Genuinely tearing my hair out with Bricks doing some unbelievably frustrating stuff.

I’ve started with a bare site, no plugins and just bricks as the theme. My aim is to set up a boxed site at 1360px max width. All containers will align at max 1360px in html, and this is really straight forward.

But in Bricks it’s an absolute nightmare because it’s setting every container to 1100px wide.

In settings>page settings, I’ve set the layout to “boxed” and set the max width 1360px so any containers added to the page should be 1360px but they are rendering shorter at 1100px wide. This means something is hard coded and defaulting to this size and I have no idea how to disable it.

Can anyone tell me how to dsiable this as its really very annoying.


You can freely change the width of the container.

In the builder,
Setting > Theme Style > Element - Container

Just predefine your max-width there.
Hope it helps.

Thanks for replying. I’ve already done that but the problem still exists. Bricks is setting all containers to a fixed width of 1100px, regadless of the max-width setting.

1st image, the containers are all at 1100px and the boxed width is 1360px. In theme settings, you can see that bricks is fixing global containers to a set width of 1100px - this makes no sense and causes problems because that is not responsive. I have to manually enter a value to overide this - say 100% or 1360px and the problem in doing this is that it is still not responsive - it fixes the container width. Therefore, if a user drags the browser width in or a screen is less that 1100px, then the content disappears off screen. You can see this in the 2nd image - top right, content disappears.

Then, just set the container width to 100%, and the max-width is leave it as it is (1360px). Then it should work as it should, I assume.

Already tried that. Nothing over-rides this setting.

See attached - this is bog standard with all styles reset to Bricks default. It sets all containers to 100px. If I apply a style, and set the width to 100% it still sets the containers to 1100px.

This width has clearly been hard coded by the developers and I have no idea why, and it makes no sense to do this. Within settings, the width box of a Div is blank so why are containers fixed to 1100px.

Do any developers read this forum?

Strange. If so, a site URL is required to check.

Here you go.

Do you have conditions for this set to Entire website?

No conditions set for anything. This is a fresh default install. I’ve exhasted everything, applied changes, deleted, reinstalled, re-downloaded the zip and installed it on 2 different servers and did a local install.

Compare these 2 pages

  1. Template downloaded - this is sized at 1360px and renders correctly to 1360px in the browser
  1. Exact same template applied on my servers, local etc and it is rendering containers at 1100px

So you haven‘t set this theme style to be applied to the website and it thus, doesn‘t care what you set. Try to set a condition for this style.

If that‘s the issue and I also fell for this, it‘s the 100th time that this really bad UX not at least suggesting to once set conditions, is the source of error for Bricks newcomers.

Do you have an example to implement? Im sure I tried setting conditions and it didnt work either. (I’m a new comer to Bricks but not new to building sites. )Yes, this is really bad UX. I’ve been struggling wth bricks for the past week and it’s taking up so much time.

And that might help for getting started in general

1 Like

When you create a theme style, you will need to set the condition to apply it to entire site. Otherwise, the styling won’t work.

I checked your site, no boxed layout applied.

1 Like

What @jornes & @Maexxx mentioned is correct, you need to make sure that you set a condition for your theme styles (e.g. Entire website).

I’d already done that. It still set containers to 1100px. In the urls, I took everything back to fresh install to compare - no difference.

Can you please share a video walkthrough of your theme styles (conditions & container width settings)? alternatively you can also share temporary admin access to with a link to this thread and we can take a look at what’s missing.

Btw this is where you can add the condition for the theme styles so make sure that you have it set up:

I did set the condition for the whole site. The URL was just a blnk test to compare. The images below show my settings.

Containers are just design shortcuts. They are just DIVs with special properties. A CONTAINER therefore, should render exactly the same as a DIV when the same dimensions are set. This is not happening in Bricks.

Img 1) DIV width field = blank
Img 2) CONTAINER width field = 1100px. Why? That is a forced dimension and makes no sense to do this because not al containers are equal.

Tests bear this out:

By setting a DIV to max-width 1360px, and leaving the width field blank, the DIV renders properly at 1360px in the browser.

By setting a CONTAINER to max-width 1360px, the CONTAINER renders incorrectly at 1100px because Bricks is forcing it to render at 1100px . i.e. Bricks is over-riding user settings.

EDIT: Something else I noticed when inserting a Nav element. Bricks inserts a SECTION with a nested CONTAINER. This is semantically incorrect is it not? Sections are normally reserved for the body and meant to include a heading (H1 etc). The Nav element should be a div should it not?

It would be great if you could provide a temp access to admin, or me. I’d love to check it out in your backend. :wink:

Instead of max-width put width as 1360px. Your width is 1100px so all the container are 1100px by default and would stretch to 1360px if you give 100%. But if you set width to 1360px then the containers will be 1360 px. Try and let know

1 Like

Yeah, got that far. Setting the same dimensions (width 1360px or 100%) in a browser inspector, both CONT & DIV stretch to 1360px and all is good. This page ref - Test – Praise The Sun

Setting the same dimensons in Bricks, saving and viewing in a new tab, then dragging the browser in, the content wraps in the DIV but not the CONTAINER. (Top is CONTAINER in image). I’m stumped and my brain is hurting from all this.