How to get rid of the max width 'max-w-4xl' default page styling on the Page model?

Visual Editor Help
, ,
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. Builder.io: Visual Development Platform

Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key

What are you trying to accomplish
I’m trying to remove the maximum width from my page, but Builder.io sets it by default. I want an option to turn this off. How do I turn this off? there is no option to edit this anywhere and it’s really frustrating.

Screenshots or video link

image
image1920×982 165 KB

Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

Hello @PatriciaJulius

You can try using an AI prompt to remove the max-width from the default page styling. If that doesn’t resolve the issue, please share the Builder content or project URL, and we’ll be happy to assist you further.

Thanks,

Screenshot 2025-09-12 at 5.27.51 PM
Screenshot 2025-09-12 at 5.27.51 PM1920×860 98.7 KB

3

EDIT:
I’ve solved this by adding custom css styling to the Page, by clicking the upper right 3 dots → Open Commands → Toggle Code Editor → typing ``main[role=“main”][itemtype=“``https://schema.org/WebPageElement”``] {
max-width: none !important;
} into the custom css. Which essentially gets the element that was making the layout have the max width and removing it by overriding the css

1 Like