Is there a way to change the max-width of the editor to be 100%?

[philmetzger]

When I use Editor.JS i find there is always something like max-width: 650px. Is there a way to kind of turn this off and make it full-width. i.e. take up the parent container? (without having to manually set a bunch of styles)
Why is this max-width there anyway?

[gatanaso]

Hi @philmetzger,

I believe that the max-width is there to allow for a nice UX as there should be space for the block controls (i.e. tune buttons). However, I am not an EditorJS expert or a maintainer, so hopefully someone with more know-how can tell you about it in greater detail.

Regarding the full width, you can change the max-width by modifying these classes:

.ce-block__content, 
.ce-toolbar__content {
 max-width: 1000px;  /* example value, adjust for your own use case */
}

Hope this helps,
Goran

[alexisvisco]

If you do that all buttons stay at the same place as before ...

[chattambulo]

I'm new to editorjs, same problem and I'm testing a solution. For now, I simply add some styles to my page and it works.

.ce-block__content, .ce-toolbar__content { max-width:calc(100% - 80px) !important; } .cdx-block { max-width: 100% !important; }