Modify right margin in Pluto notebook

Tooling Pluto
1

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 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

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

@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 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!

2

For what concerns the specific task of overriding the @margin function, the answer I got on zulip is the solution.

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

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.

3

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

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!

1 Like