help with custom css

[ggrrll]

Hi,

I am trying to reduce side margins
I added

:root {
    --jp-notebook-max-width: 100% !important;
}

in my custom.css as suggested here
https://stackoverflow.com/questions/21971449/how-do-i-increase-the-cell-width-of-the-jupyter-ipython-notebook-in-my-browser/76778615#76778615

I get the expected result in notebooks, but the tree looks bad 👇

any idea?

thanks

[jtpio]

@ggrrll maybe tweaking the selector as follows would help keep it scoped to the notebooks page only?

:root body[data-notebook='notebooks'] {
  --jp-notebook-max-width: 100% !important;
}

[ggrrll]

thanks

tbh, I am not sure anymore what was going wrong

now that simple solution works, by editing indeed notebook/custom/custom.css

for the sake of completeness, I report hereby my env. (on linux mint 21.1)

IPython          : 8.16.1
ipykernel        : 6.25.2
ipywidgets       : 8.1.1
jupyter_client   : 8.4.0
jupyter_core     : 5.2.0
jupyter_server   : 2.8.0
jupyterlab       : 4.0.7
nbclient         : 0.8.0
nbconvert        : 7.9.2
nbformat         : 5.9.2
notebook         : 7.0.6
qtconsole        : not installed
traitlets        : 5.11.2

[gcbeltramini]

It's always good to have alternative solutions. This one also works for me:

.jp-Notebook {
  --jp-notebook-max-width: 100% !important;
}

Editing the .container used to achieve the same behavior in the past, but it's no longer effective for me:

.container {
  width: 100% !important;
}

[jtpio]

Btw if you want the notebook to take the full width, there is now a proper way to do it via the UI since Notebook 7.3: https://jupyter-notebook.readthedocs.io/en/latest/changelog.html#full-width-notebook