# Pluto: how to increase the width of "Live docs"

**URL:** <https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057>\
**Category:** Pluto\
**Created:** [April 11, 2021, 8:49pm UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057 "2021-04-11T20:49:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![maajdl](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/maajdl/32/22838_2.png) [@maajdl](https://discourse.julialang.org/u/maajdl)\
**Post date:** [April 11, 2021, 8:49pm UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057/1 "2021-04-11T20:49:40Z")

</div>

I found here how to increase the width and the height of output cells in Pluto:

```julia
<style>main {max-width: 1000px;}</style>
<style>pluto-output.scroll_y {max-height: 2000px;}</style>

```

I tried to find out how to increase the width of the “Live docs” window.  
I did it in Google Chrome with the developpers tools.  
I tried many items, but could not find the proper item to control the width.

Any suggestion about this?

Thanks

Michel

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [April 11, 2021, 11:07pm UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057/2 "2021-04-11T23:07:33Z")

</div>

This should work, I think:

```julia
pluto-helpbox {
    width: 50vw;
}

```

here 50 is the percentage of total page width.

---

<div class="post-metadata">

**Author:** ![maajdl](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/maajdl/32/22838_2.png) [@maajdl](https://discourse.julialang.org/u/maajdl)\
**Post date:** [April 12, 2021, 7:52am UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057/3 "2021-04-12T07:52:23Z")

</div>

Thanks, this work!

Can’t understand why it didn’t work with “max-width”, but ok I am not a specialist, not even a beginner.

I had a look at [index.css](https://github.com/fonsp/Pluto.jl/blob/main/frontend/index.css) from Pluto on GitHub.  
To see what else I could do to improve my user-experience with Pluto.

I will post another question, maybe, about how to modify the layout of Pluto.

I would like:

- to move all the cells to the left as much as possible.
- to have “Live docs” as much as possible to right
- eventually to have “Live docs” popping from right to left instead of bottom-up
- eventually to have “Live doc” occupy the full screen on the right, from top to bottom

If you had any suggestion or comment, again I would appreciate!

Michel

---

<div class="post-metadata">

**Author:** ![aplavin](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aplavin/32/222056_2.png) [@aplavin](https://discourse.julialang.org/u/aplavin)\
**Post date:** [April 12, 2021, 12:50pm UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057/4 "2021-04-12T12:50:35Z")

</div>

I personally didn’t go into that much depth regarding pluto visual appearance. This is what I currently have in my browser user CSS:

```julia
<my-pluto-hostname>##main:style(max-width: calc(100% - 2em) !important; margin-left: 1em !important; margin-right: 1em !important)
<my-pluto-hostname>##jltree img:style(max-width: none !important; max-height: none !important)
<my-pluto-hostname>##jltree.collapsed img:style(max-width: 15rem !important; max-height: 15rem !important)

```

This makes cells code and output to take the full width of the browser window and increases the size of output images (plots) when there are several of them in a single cell.  
Maybe this snippet will be helpful to craft the customizations you want. I didn’t look into `index.css` or other files at all and solely relied on devtools in my browser. Btw, I found Pluto easier to customize compared to the current jupyter.

---

<div class="post-metadata">

**Author:** ![JacobC](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jacobc/32/51809_2.png) [@JacobC](https://discourse.julialang.org/u/JacobC)\
**Post date:** [August 23, 2023, 7:28pm UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057/5 "2023-08-23T19:28:12Z")

</div>

Hello all,  
I am new to inspecting pages and editing things, I didn’t even realize it was possible. Where are you inputting these commands? I would love to do your simple pluto-helpbox fix, but can’t find anything.  
Thanks!

---

<div class="post-metadata">

**Author:** ![ederag](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ederag/32/4106_2.png) [@ederag](https://discourse.julialang.org/u/ederag)\
**Post date:** [August 23, 2023, 7:43pm UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057/6 "2023-08-23T19:43:52Z")

</div>

Just run a cell with this code:

```julia
html"""<style>
pluto-helpbox {
    width: 50vw;
}
"""

```

See also [Modify right margin in Pluto notebook - #3 by pankgeorg](https://discourse.julialang.org/t/modify-right-margin-in-pluto-notebook/61452/3)

---

<div class="post-metadata">

**Author:** ![JacobC](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jacobc/32/51809_2.png) [@JacobC](https://discourse.julialang.org/u/JacobC)\
**Post date:** [August 24, 2023, 6:41pm UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057/7 "2023-08-24T18:41:22Z")

</div>

Unfortunately that didn’t seem to work. I copied it and put it in the cell right below my package declarations and ran it and nothing happened. I assume the 50 is for 50% of the view window, I changed that around too and nothing changed. Could it be my browser (Vivaldi)?  
Thanks for the help!

---

<div class="post-metadata">

**Author:** ![ederag](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ederag/32/4106_2.png) [@ederag](https://discourse.julialang.org/u/ederag)\
**Post date:** [August 24, 2023, 7:18pm UTC](https://discourse.julialang.org/t/pluto-how-to-increase-the-width-of-live-docs/59057/8 "2023-08-24T19:18:23Z")

</div>

> I copied it and put it in the cell right below my package declarations and ran it

The position does not matter here, and it looks like your steps are fine.  
I also tried to paste the code above (just like you did) and it works here.

> assume the 50 is for 50% of the view window,

That seems correct too.

> Could it be my browser (Vivaldi)?

Indeed; `firefox 115.1.0esr` here.