Ipython / Jupyter Notebook HTML biased when viewing a mobile browser

Question

Windows 8.1, Python 3.4, Jupyter Notebook

I am using a custom CSS stylesheet hosted on github to render my laptop in HTML. When I load as HTML and view the file in my desktop browser, the code, text, markdown and images are aligned and formatted properly. However, when I look at the same notebook in a mobile browser, the laptop seems to have a massive left margin fill and no longer align with the background.

Any help in solving this problem is welcome. I linked the image samples and my stylish Jupyter / IPython CSS table for reference. Thanks.

In the desktop browser

In a mobile browser

My Ipython / Jupyter Notebook CSS Stylesheet is copied below:

 <style> div.cell{ width: 1000px; /* altered from 850px*/ margin-left: 0%!important; /*altered from 10%*/ margin-right: 5%; /*altered from auto%*/ } /*div.text_cell{added from frankcleary.com but didn't look great for current setup margin-top:-2px; margin-bottom:-2px; padding-top:2px; padding-bottom:2px; border-left:2px solid #505050; border-collapse:collapse; border-top:none; border-bottom:none; }*/ h1 { font-family: "Open sans",verdana,arial,sans-serif; } .text_cell_render h1 { font-weight: 200; font-size: 40pt; line-height: 100%; color:#447adb; margin-bottom: 0em; margin-top: 0em; display: block; white-space: nowrap; } h2 { font-family: "Open sans",verdana,arial,sans-serif; text-indent:1em; } .text_cell_render h2 { font-weight: 200; font-size: 20pt; font-style: italic; line-height: 100%; color:#447adb; margin-bottom: 1.5em; margin-top: 0.5em; display: block; white-space: nowrap; } h3 { font-family: "Open sans",verdana,arial,sans-serif; } .text_cell_render h3 { font-weight: 300; font-size: 18pt; line-height: 100%; color:#447adb; margin-bottom: 0.5em; margin-top: 2em; display: block; white-space: nowrap; } h4 { font-family: "Open sans",verdana,arial,sans-serif; } .text_cell_render h4 { font-weight: 300; font-size: 16pt; color:#447adb; margin-bottom: 0.5em; margin-top: 0.5em; display: block; white-space: nowrap; } h5 { font-family: "Open sans",verdana,arial,sans-serif; } .text_cell_render h5 { font-weight: 300; font-style: normal; color: #1d3b84; font-size: 16pt; margin-bottom: 0em; margin-top: 1.5em; display: block; white-space: nowrap; } div.text_cell_render{ font-family: "Open sans",verdana,arial,sans-serif; line-height: 135%; font-size: 125%; width:750px; /* altered from 750px */ margin-left:auto; margin-right:auto; text-align:justify; text-justify:inter-word; } div.output_subarea.output_text.output_pyout { overflow-x: auto; overflow-y: scroll; max-height: 300px; } div.output_subarea.output_stream.output_stdout.output_text { overflow-x: auto; overflow-y: scroll; max-height: 300px; } div.output_subarea.output_html.rendered_html { overflow-x: scroll; max-width: 100%; overflow-y: scroll;/* was commented out */ max-height: 300px;/* was commented out */ } code{ font-size: 78%; } .rendered_html code{ background-color: transparent; white-space: inherit; } ul{ /* color:#447adb; */ margin: 2em; } ul li{ padding-left: 0.5em; margin-bottom: 0.5em; margin-top: 0.5em; } ul li li{ padding-left: 0.2em; margin-bottom: 0.2em; margin-top: 0.2em; } ol{ /* color:#447adb; */ margin: 2em; } ol li{ padding-left: 0.5em; margin-bottom: 0.5em; margin-top: 0.5em; } /*.prompt{ display: None; } */ ul li{ padding-left: 0.5em; margin-bottom: 0.5em; margin-top: 0.2em; } a:link{ font-weight: bold; color:#447adb; } a:visited{ font-weight: bold; color: #1d3b84; } a:hover{ font-weight: bold; color: #1d3b84; } a:focus{ font-weight: bold; color:#447adb; } a:active{ font-weight: bold; color:#447adb; } .rendered_html :link { text-decoration: none; } .rendered_html :hover { text-decoration: none; } .CodeMirror{ font-family: "Source Code Pro", source-code-pro,Consolas, monospace; } .rendered_html :visited { text-decoration: none; } .rendered_html :focus { text-decoration: none; } .rendered_html :active { text-decoration: none; } .warning{ color: rgb( 240, 20, 20 ) } hr { color: #f3f3f3; background-color: #f3f3f3; height: 1px; } blockquote{ display:block; background: #f3f3f3; font-family: "Open sans",verdana,arial,sans-serif; width:700px; /*altered from 610px*/ padding: 5px 5px 5px 5px; /*altered from 15px 15px 15px 15px*/ text-align:justify; text-justify:inter-word; } blockquote p { margin-bottom: 0; line-height: 125%; font-size: 100%; text-align: center; } div#notebook_panel {/* added from theming w/ Hammond */ box-shadow: none; -webkit-box-shadow: none; border-top: none; } /* element.style { } */ </style> <script> MathJax.Hub.Config({ TeX: { extensions: ["AMSmath.js"] }, tex2jax: { inlineMath: [ ["$","$"], ["\\(","\\)"] ], displayMath: [ ["$$","$$"], ["\\[","\\]"] ] }, displayAlign: "center", // Change this to "center" to center equations. "HTML-CSS": { styles: {".MathJax_Display": {"margin": 4}} } }); </script> 

UPDATE:

Here is a link to the link to the HTML file created by IPython / Jupyter when loaded as an HTML file.

Download HTML file from Dropbox

Answer 1

This may not be what you are looking for at all, but what if you put a div around the whole code and set it to auto?

Alternatively, you can set the main div for the content:

 width: 70vw; 

Then you will need to create two divs for each side of the wizard and set each of them:

 width: 15vw; 

Thus, divs occupy the entire width and will always remain proportional no matter what screen it is on.

Answer 2

A workaround would be to do this:

• Use media queries for smaller screens.
• Try to stick to the Bootstraps grid instead of following the traditional approach of manually applying margins and padding. (looking at the HTML file, it turned out that you used the download).

• Convert the contents of the div (the one that has all the text) to div / container, and apply a negative CSS marker to the content (and not the container), something like this:

  media (min-width: 480px) and (max-width:768px){ #container #some-div{ margin-left: -50%; } }

• Use em instead of px .

What this will do is move the entire text part to the left when it opens on a mobile device.

You can also add position: absolute; top: -10%; position: absolute; top: -10%; to the above code to check it.

Hope this helps ...