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 ...

[GlebGlushchenko]

Did you find a way to fix this?

[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; }

[thinkdj]

Thanks for this! Saved a bunch of time.
I really hope an option to configure editor width is officially given, as a hacky CSS override is not a future-proof solution.

[leonnicklas]

Nice work but I guess some things changed over time...

I now modified it a bit more to get a cleaner look:

@media (min-width: 651px) {
  .ce-block__content, .ce-toolbar__content {
    max-width: calc(100% - 120px) !important;
    margin: 0 60px;
  }
}

.cdx-block {
  max-width: 100% !important;
}

[nitinkumarnk-me]

Editor.js Block Width Customization Guide

This guide helps you set up a custom block width for your Editor.js blocks. By following the steps below, you'll be able to easily modify the width of the blocks in your editor.

Steps

1. Create a CSS File:

   • Name it editor.css.

2. Copy the Code Below:

   • Paste the following CSS code into your editor.css file.

/* 
   Example: editor.css

   This CSS controls the width of EditorJS blocks.
   You can easily adjust the width by changing the --block-width variable below.
*/

/* Set the block width (default: 780px) */
:root {
    --block-width: 780px; /* Change this value to set your desired block width */
}

/* Apply the block width to EditorJS elements */
.ce-block__content,  /* Content inside each block */
.ce-block,           /* The block wrapper */
.codex-editor__redactor, /* Main editing area */
.ce-toolbar__content { /* Toolbar content for editing */
    max-width: var(--block-width); /* Use the block width set in :root */
    width: var(--block-width); /* Apply the block width */
    margin: 0 auto; /* Center the blocks */
}

/* Adjust the toolbar position in narrow mode (optional) */
.codex-editor--narrow .ce-toolbar__actions {
    right: -40px; /* Adjust toolbar position as needed */
}