# Modify right margin in Pluto notebook

**URL:** <https://discourse.julialang.org/t/modify-right-margin-in-pluto-notebook/61452>\
**Category:** Pluto\
**Created:** [May 19, 2021, 2:28pm UTC](https://discourse.julialang.org/t/modify-right-margin-in-pluto-notebook/61452 "2021-05-19T14:28:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [May 19, 2021, 2:28pm UTC](https://discourse.julialang.org/t/modify-right-margin-in-pluto-notebook/61452/1 "2021-05-19T14:28:44Z")

</div>

Hi,

I wanted to modify the right margin of pluto notebook cells as if I increase the cell width like suggested in [This other topic](https://discourse.julialang.org/t/cell-width-in-pluto-notebook/49761/2) and then reduce the browser window size, the right margin makes my cell go out of the visible screen (on the left).

Based on the solution above, I tried doing something similar for the margin by adding a cell like this

```julia
html"""<style>
main {
    max-width: 1000px;
	margin-right: 100px;
}
"""

```

But looking at the developer tools, it looks like the margin parameter I set is overwritten by the one specified in the following code in editor.css

```nohighlight
@media screen and (min-width: calc(700px + 25px + 6px + 500px)) and (max-width: calc(700px + 25px + 6px + 500px + 500px)) {
    body:not(.disable_ui) main {
        margin-right: 500px;
        align-self: flex-end;
    }
}

```

I tried defining another @media script similar to the one above inside html tags in the pluto cell, but it just outputs the code as a string.

I have seen that a similar function is used in the [TableOfContents](https://github.com/fonsp/PlutoUI.jl/blob/main/src/TableOfContents.jl) example in PlutoUI but it is not clear to me how I could apply styling functions like that to the existing cell layout rather than on an additional object like done in the example above.

Could someone help me understand how I could exploit pluto to remove the right margin or in general to apply a @media like styling function to the main cells?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [May 19, 2021, 2:59pm UTC](https://discourse.julialang.org/t/modify-right-margin-in-pluto-notebook/61452/2 "2021-05-19T14:59:36Z")

</div>

For what concerns the specific task of overriding the @margin function, the [answer](https://julialang.zulipchat.com/#narrow/stream/243342-pluto.2Ejl/topic/changing.20cell.20margin/near/239437961) I got on zulip is the solution.

Adding `!important` after the size in the html style seems to do the trick:

```julia
html"""<style>
main {
    max-width: 1000px !important;
    margin-right: 100px !important;
}
"""

```

The question on whether is possible to create a size-dependent style from within a pluto cell (like with @media) is still unclear though.

---

<div class="post-metadata">

**Author:** ![pankgeorg](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pankgeorg/32/21549_2.png) [@pankgeorg](https://discourse.julialang.org/u/pankgeorg)\
**Post date:** [May 19, 2021, 4:32pm UTC](https://discourse.julialang.org/t/modify-right-margin-in-pluto-notebook/61452/3 "2021-05-19T16:32:00Z")

</div>

You would do screen-size dependent styling combining the two above stylesheets:

```julia
html"""<style>
/* screen size more than: and less than: */
@media screen and (max-width: 699px) { /* Tablet */ 
  /* Nest everything into here */
    main { /* Same as before */
        max-width: 1000px !important; /* Same as before */
        margin-right: 100px !important; /* Same as before */
    } /* Same as before*/

}

@media screen and (min-width: 700px) and (max-width: 1199px) { /* Laptop*/ 
  /* Nest everything into here */
    main { /* Same as before */
        max-width: 1000px !important; /* Same as before */
        margin-right: 100px !important; /* Same as before */
    } /* Same as before*/
}

@media screen and (min-width:1200px) and (max-width: 1920px) { /* Desktop */ 
  /* Nest everything into here */
    main { /* Same as before */
        max-width: 1000px !important; /* Same as before */
        margin-right: 100px !important; /* Same as before */
    } /* Same as before*/
}

@media screen and (min-width:1921px) { /* Stadium */ 
  /* Nest everything into here */
    main { /* Same as before */
        max-width: 1000px !important; /* Same as before */
        margin-right: 100px !important; /* Same as before */
    } /* Same as before*/
}

"""
</style>
"""

```

Remember to close your style tags!