max-width

[ghost]

How do we set max-width?
It is 650px currently, i don't know why.

[joel611]

you can use css to override .ce-block__content and .ce-toolbar__content

[zerqs]

this is not working for me.
have the css classes changed since Aug 2019?

[sunmachines]

Just open DOM debugger and find the classes you need to override.

[b-babic]

Like @joel611 said. unset the default styles from these two classes

.ce-block__content,
.ce-toolbar__content {
    max-width: unset;
}

[Rubix982]

How does this work exactly? I'm using NextJS, Material UI, and EditorJS together at the moment.

As expected, I get the class names,

I write CSS to over ride those,

As expected, I see the CSS being properly loaded.

Do I see the CSS is actually updated? No.

I think my method is usually how CSS classes are over rided, no?

[emrecoban]

I have the same issue. Any solution? (Next.js with TailwindCSS)

[talyguryn]

same as #1891

[joshuavachon25]

I may have a solution.
I am using SvelteKit (SSR) and I was scoping my style in my editorjs component. But if, instead, you add the css to the global style, it works! So, you probably scoped your style to your component, but instead copy it to the global css.

I used this css to make it 100%:
.ce-block__content, .ce-toolbar__content { max-width: calc(100% - 100px) !important; } .cdx-block { max-width: 100% !important; }

[gajda-w]

I know this is an old issue but is someone working with Nextjs and editorjs and have problem with max-width, just move css properties to global.css

.ce-block__content, .ce-toolbar__content, .codex-editor__redactor { max-width: unset; }

peace