# Cell width in Pluto Notebook

**URL:** <https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761>\
**Category:** General Usage\
**Tags:** pluto\
**Created:** [November 8, 2020, 1:07am UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761 "2020-11-08T01:07:56Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![GHRALIMA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ghralima/32/19244_2.png) [@GHRALIMA](https://discourse.julialang.org/u/GHRALIMA)\
**Post date:** [November 8, 2020, 1:07am UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/1 "2020-11-08T01:07:56Z")

</div>

I’ve changed from Jupyter to Pluto notebook a couple months ago, and so far I’m having a very nice experience with it. But sometimes, when I plot some results to show my students, I would like to have a wider cell. Is there any easy way to increase the cell width in Pluto notebooks?

---

<div class="post-metadata">

**Author:** ![lyonsquark](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lyonsquark/32/4483_2.png) [@lyonsquark](https://discourse.julialang.org/u/lyonsquark)\
**Post date:** [November 8, 2020, 1:20am UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/2 "2020-11-08T01:20:29Z")

</div>

I saw the following somewhere and it works for me… Put this in a cell…

```julia
html"""<style>
main {
    max-width: 1900px;
}
"""

```

---

<div class="post-metadata">

**Author:** ![Ved\_Mahajan](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ved_mahajan/32/21838_2.png) [@Ved\_Mahajan](https://discourse.julialang.org/u/Ved_Mahajan)\
**Post date:** [April 20, 2021, 4:03am UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/3 "2021-04-20T04:03:15Z")

</div>

This increases the size of the cell only from the left side, the free space in the right side remain the same.  
Can the size be increased from both the sides?  
My pluto version is: ` Pluto v0.14.2`

Thank you in advance!

---

<div class="post-metadata">

**Author:** ![dpkwhan](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/dpkwhan/32/26456_2.png) [@dpkwhan](https://discourse.julialang.org/u/dpkwhan)\
**Post date:** [June 25, 2021, 3:29am UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/4 "2021-06-25T03:29:01Z")

</div>

This works pretty well for me. It also caps the cell width by 90% of screen width.

```julia
using HypertextLiteral

@bind screenWidth @htl("""
	<div>
	<script>
		var div = currentScript.parentElement
		div.value = screen.width
	</script>
	</div>
""")

begin
	cellWidth= min(1000, screenWidth*0.9)
	@htl("""
		<style>
			pluto-notebook {
				margin: auto;
				width: $(cellWidth)px;
			}
		</style>
	""")
end

```

---

<div class="post-metadata">

**Author:** ![ryszard314159](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ryszard314159/32/34402_2.png) [@ryszard314159](https://discourse.julialang.org/u/ryszard314159)\
**Post date:** [March 7, 2022, 3:38pm UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/5 "2022-03-07T15:38:36Z")

</div>

I am getting `UndefVarError: @htl not defined` - please advise.

---

<div class="post-metadata">

**Author:** ![dpkwhan](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/dpkwhan/32/26456_2.png) [@dpkwhan](https://discourse.julialang.org/u/dpkwhan)\
**Post date:** [March 8, 2022, 3:18am UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/6 "2022-03-08T03:18:23Z")

</div>

This is an even better solution:

```julia
html"""
<style>
	main {
		margin: 0 auto;
		max-width: 2000px;
    	padding-left: max(160px, 10%);
    	padding-right: max(160px, 10%);
	}
</style>
"""

```

---

<div class="post-metadata">

**Author:** ![ryszard314159](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ryszard314159/32/34402_2.png) [@ryszard314159](https://discourse.julialang.org/u/ryszard314159)\
**Post date:** [March 8, 2022, 3:11pm UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/7 "2022-03-08T15:11:04Z")

</div>

Works like a dream - thanks!

---

<div class="post-metadata">

**Author:** ![tbeason](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tbeason/32/15898_2.png) [@tbeason](https://discourse.julialang.org/u/tbeason)\
**Post date:** [March 8, 2022, 3:25pm UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/8 "2022-03-08T15:25:24Z")

</div>

Is there a way to have Pluto automatically add a cell with this when I open a notebook?

---

<div class="post-metadata">

**Author:** ![KajWiik](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kajwiik/32/199_2.png) [@KajWiik](https://discourse.julialang.org/u/KajWiik)\
**Post date:** [March 8, 2022, 7:29pm UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/9 "2022-03-08T19:29:25Z")

</div>

Perfect indeed, thanks!

---

<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:** [March 8, 2022, 9:46pm UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/10 "2022-03-08T21:46:40Z")

</div>

See [[ANN] PlutoStyles.jl: override styles of Pluto notebooks](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280) for applying styles to all notebook without modifying their files.  
_disclaimer: my package_

---

<div class="post-metadata">

**Author:** ![fabern](https://avatars.discourse-cdn.com/v4/letter/f/76d3ee/32.png) [@fabern](https://discourse.julialang.org/u/fabern)\
**Post date:** [March 10, 2023, 7:56am UTC](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/11 "2023-03-10T07:56:13Z")

</div>

The solution from this post within a notebook has the advantage over PlutoStyles.jl to work also in an exported static HTML. However, I have noticed that printing to PDF was bad, so I suggest to limit it to the screen as follows:

```julia
html"""
<style>
	@media screen {
		main {
			margin: 0 auto;
			max-width: 2000px;
    		padding-left: max(283px, 10%);
    		padding-right: max(383px, 10%); 
            # 383px to accomodate TableOfContents(aside=true)
		}
	}
</style>
"""

```