diff --git a/.gitignore b/.gitignore
index ada944a..f786ced 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .idea
 .Rhistory
+.vscode
diff --git a/index.html b/index.html
index 9fa398d..30a09ee 100644
--- a/index.html
+++ b/index.html
@@ -3,14 +3,10 @@
 
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
   <title>Comprehensive Python Cheatsheet</title>
   <link rel="icon" href="web/favicon.png">
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-  <script src="web/showdown.min.js"></script>
   <link rel="stylesheet" href="web/default.min.css">
-  <script src="web/highlight.min.js"></script>
-  <script src="web/script.js"></script>
   <meta name="twitter:card" content="summary">
   <meta name="twitter:title" content="Comprehensive Python Cheatsheet">
   <meta name="twitter:description" content="Exhaustive, simple, beautiful and concise. A truly pythonic cheat sheet about Python programming language.">
@@ -163,5 +159,10 @@ pre.prettyprint {
   <br>
   <br>
   <br>
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+  <script src="web/showdown.min.js"></script>
+  <script src="web/highlight.min.js"></script>
+  <script src="web/script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/web/script.js b/web/script.js
index c03b717..29c6001 100644
--- a/web/script.js
+++ b/web/script.js
@@ -26,9 +26,10 @@ function removeOrigToc() {
 
 function insertLinks() {
   $('h2').each(function() {
-    aId = $(this).attr('id');
-    $(this).append('<a href="#'+aId+'" name="'+aId+'">#</a>');
-  });
+    aId = $(this).attr('id')
+    text = $(this).text()
+    $(this).html('<a href="#'+aId+'" name="'+aId+'">#</a>'+text)
+  })
 }
 
 function addToc() {
diff --git a/web/style.css b/web/style.css
index a814234..df0e509 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,11 +1,8 @@
 
 /* Copyright 2013 Michael Bostock. All rights reserved. Do not copy. */
 
-@import url(//fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);
+@import url(https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);
 
-html {
-  min-width: 1040px;
-}
 
 .ocks-org body {
   background: #fcfcfa;
@@ -56,9 +53,7 @@ h1, h2 {
 h2 a[name],
 h2 a[id] {
   color: #ccc;
-  right: 100%;
   padding: 0 .3em;
-  position: absolute;
 }
 
 header,
@@ -143,7 +138,7 @@ textarea {
 body > pre {
   border-left: solid 2px #ccc;
   padding-left: 18px;
-  margin: 2em 0 2em -20px;
+  margin: 2em 0 2em 0;
 }
 
 .html .value,
@@ -219,3 +214,18 @@ blockquote q:before,
 blockquote q:after {
   content: "";
 }
+
+@media only screen
+and (max-device-width : 1024px){
+  .ocks-org body {
+    margin: 1rem;
+  }
+
+  h1{
+    font-size: 3rem;
+  }
+  p, h1, img{
+    max-width: calc(100vw - 2em);
+    min-width: calc(100vw - 2em);
+  }
+}
