Ipython/Jupyter Notebook HTML misaligned when viewing mobile browser

Question

Windows 8.1, Python 3.4, Jupyter Notebook

I'm using a custom CSS stylesheet hosted on github to render the notebook in HTML. When I download as HTML and look at the file on my desktop browser, the code, text, markdown and images are aligned and formatted properly. However when I view the same notebook on a mobile browser the notebook appears to have a massive left margin padding and is no longer aligned properly with the background.

Any help solving this problem would be greatly appreciated. I've attached image samples and my Jupyter/IPython CSS Stylesheet for reference. Thank you.

On Desktop Browser

On 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 the dropbox link to the HTML file produced by IPython/Jupyter when downloaded as an HTML file.

Dropbox HTML file download

Answer 1

Maybe this is not what you are looking for at all, but what if you place a div around the entire code and set it's margin to auto?

Alternatively, you could set a master div around the content to:

width: 70vw;

You would then have to create two divs for either side of the master and set each to:

width: 15vw;

In this way, divs take up the entire width, and will always remain in proportion no matter what screen it's on.

Answer 2

One workaround would be to do this:

• Use Media queries for smaller screens.
• Try to stick with Bootstraps grid system instead of going for the traditional approach of manually applying the margins and padding.(looking at the HTML file, found out that you used bootstrap).

• Envelope the div content(the one which has all the text) into a div/container and apply a negative margin CSS to the content(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 shift the entire text part towards the left when it is opened in mobile device.

You can also add a position: absolute; top: -10%; position: absolute; top: -10%; to the above code, just to test it out.

Hope it helps...