How to change default max element width 1100px in Bricks 2.x

How To
1

Hi, I’ve been trying for an hour to find where in Bricks 2.0 settings I can set a custom maximum width for elements.
Currently, it’s set to 1100px by default, but in my projects this fits maybe 1% of cases.
Most clients want a base width of around 1440px etc for the site/elements.

Right now I’m handling it with a CSS hack:

.brxe-container { width: 1400px; }

but that’s obviously not ideal, and I expect there’s a way to set it properly within Bricks.
Thanks for pointing out where to adjust this, or confirming if it’s currently a bug.

2

On a page currently being edited go to Manage and Theme Styles. There you can set the width of Elements. ( BTW why can’t I go to ThemeStyles directly from the Bricks menu in the WP admin? Instead I have to edit a random page )
It doesn’t seem very consistent as Section defaults to 100% while Container defaults to 1100px - why does it use that value?

I agree though that the interface in 2.0 has become extremely opaque and hard to find anything now.

1 Like
3

in the visual editor you can select the class you are referring, and style it the way you prefer.

Screenshot 2025-08-12 at 23.02.54
Screenshot 2025-08-12 at 23.02.54660×510 36.3 KB

4

How to set a global container width in Bricks 2.0 (no CSS hacks)

1. Create or edit a Theme Style

  • Go to Bricks → Templates → Add New (or edit an existing Theme Style)
  • Set the template type to Theme Style
  • Make sure it’s set as your default under Bricks → Settings → Theme Styles
    1
    1317×685 19.2 KB

    2
    2392×823 27.9 KB

2. Adjust the container width

  • Open the Theme Style in the editor
  • Left panel → Elements → Container
  • Set Width to 1440px (or your preferred size)
    3
    3320×756 20.2 KB

3. For full-width containers

  • While editing a page, select that container
  • Set Width to 100% in the style panel

4. (Optional) Add consistent section padding

4
4310×865 22.7 KB

In Theme Style: Elements → Section

  • Set left/right padding (e.g., 20px, or whatever you want — this works like your gutter).
  • For top/bottom padding, it’s best to use a clamp() value or a variable that’s assigned to clamp().
    • Example: clamp(5rem, 8vw, 10rem)
    • Otherwise, just pick a fixed value like 5rem based on your design.
  • This becomes the default for all sections, but you can override it per section while building.

Why this is better than CSS overrides:

  • One central place to control default widths
  • Consistent section spacing
  • Still allows flexibility for full-width layouts

Theme Styles – Bricks Academy :ice_cube:

1 Like
5

Hi Binu,
I was in this section, but it seemed like the same strange solution as what I came up with in CSS, and I thought I was in the wrong place. That wasn’t the case, I’ll remember that. Thanks a lot for the detailed instructions, this is how it should be in the help section. The admin could copy it there as it is. I don’t think I’m the only one looking for this, and even GPT5 chat didn’t know what to do with it.

1 Like
6

The fact someone has to write a detailed tutorial with screenshots for doing something so simple should tell the Bricks product team something, right? (Thank you Binu)

This is one of those things in Bricks that always confuses me everytime I come back to it. I’m sure it makes sense to whomever designed it, but to most people it’s like… why isn’t there just a Site Width setting in a main menu somewhere, really obvious? It’s like the “ethos” is getting in the way of just some good basic design.

So to simply adjust global site width I had to…

  1. Edit a random page/template for some reason
  2. Manage
  3. Theme Styles
  4. As there was no theme style, had to create and name a new one.
  5. It tells me something about loading specific or all theme styles to change this somewhere… uh?
  6. Ok! Is it in General? No.
  7. Content? No.
  8. Uhhh…Stylesheet? No.
  9. Find this blog. Elements? Ok…
  10. uh… Container? I see width and 1100px is suggested but not actually entered. I enter 1400px and save. Done.

I mean it’s so simple right! Sorry for the sarcasm, but cmon guys. Either there’s no UI/CX Designer in the Bricks team, or they are being ignored, or maybe they’re too focused on the details and not the bigger picture, the basics.

Theres dozens of google search results for this exact question. Simplify so you can be easier to use. So much potential, it’s a fantastic builder, but this ehh… there’s other similar examples like with inserting custom fields / metadata into a template, something really simple is made difficult that people just give up and find another way around.

/rant

1 Like
7

It is showing the default, but the width on the actual container itself doesn’t show the"dim" default, which ads to the confusion. All the default values that are not CSS defaults should show “dim” values in the theme style and in the elements. Once you change them in the theme style, they should show “dim” values for the elements to reflect the new default.