styling help pls

[sijirama]

I'm encountering an issue with the .bn-editor class in my application. When inspecting the element, I've identified that it has an inline padding of approximately 54px, which I'm unable to override using CSS. This padding is causing an unwanted space where the side menu is located, particularly impacting the appearance on mobile devices.

I'm using the editor to render block content by setting editable to false. However, this spacing issue persists, making the layout less optimal for mobile views.

Could anyone advise on how to effectively remove or override this inline padding within the .bn-editor class to improve the layout on mobile devices?

Thank you for your assistance!

[matthewlipski]

If you can't add a CSS rule, you can add the following to your useCreateBlockNote options:

const editor = useCreateBlockNote({
  domAttributes: {
    editor: {
      style: "padding-inline: 0px;",
    },
  },
});

If you can use CSS though, you just need to make sure the selector you use is more specific than the one which sets the padding (which is just .bn-editor), so you can do something like this:

.bn-container > .bn-editor {
    padding-inline: 0px;
}

[sijirama]

ah yes, thank you sooo much, this works.