small screen docs improvements

Author: ShMcK

_includes/docs/docs.html

@@ -4,7 +4,7 @@
 
       {% include docs/side-nav.html %}
 
-      <div class="col-md-9 col-sm-12" role="main">
+      <div class="col-md-9 col-xs-12" role="main">
         <section class="bs-docs-section">
           <h1 id="overview" class="page-header">Overview</h1>
 

_includes/docs/footer.html

@@ -2,7 +2,7 @@
 <footer>
   <div class="container">
     <div class="row">
-      <div class="col-md-7">
+      <div class="col-md-7 col-xs-12">
         <ul class="list-inline">
           <li>
             <a href="#home">Home</a>
@@ -36,7 +36,7 @@
           Copyright &copy; 2016 Shawn McKay (<a href="https://twitter.com/sh_mck" target="_blank">@Sh_McK</a>), Vancouver, BC. All Rights Reserved.
         </p>
       </div>
-        <div class="col-md-5" id="mc_embed_signup">
+        <div class="col-md-5 col-xs-12" id="mc_embed_signup">
           <form
             class="form-inline"
             action="//herokuapp.us11.list-manage.com/subscribe/post?u=324732fa284e63ca555b47978&amp;id=5f3f4f5086"

_includes/docs/header.html

@@ -5,7 +5,7 @@
     <div class="container">
 
       <div class="row">
-        <div class="col-lg-12">
+        <div class="col-lg-12 col-xs-12">
           <div class="short-intro-message">
             <h1>CodeRoad</h1>
             <h3>Tutorial Development Docs</h3>

_includes/docs/side-nav.html

@@ -1,4 +1,4 @@
-  <aside class="col-md-3 col-sm-12" role="complementary">
+  <aside class="col-md-3 col-xs-12" role="complementary">
     <div class="bs-docs-sidebar hidden-print">
       <ul class="nav sidebar">
         <li>

css/docs.css

@@ -7,9 +7,6 @@
 @viewport {
   width: device-width
 }
-#docs {
-  position: relative;
-}
 .navbar {
   margin-bottom: 0;
 }
@@ -81,6 +78,16 @@
 .bs-docs-theme-toggle {
   margin-top: 0
 }
+@media (max-width: 767px) {
+  .bs-docs-sidebar {
+    margin-top: 25px;
+    margin-left: 30px;
+  }
+  .bs-docs-sidebar .nav>li>a {
+    font-size: 18px;
+    margin-bottom: 5px;
+  }
+}
 @media (min-width:768px) {
   .back-to-top, .bs-docs-theme-toggle {
     display: block
@@ -116,6 +123,9 @@
 .bs-docs-section:last-child {
   margin-bottom: 0
 }
+#docs {
+  position: relative;
+}
 #docs code {
   padding: 0;
 }
@@ -131,4 +141,6 @@
 .gif {
   display: block;
   margin: 20px auto;
+  max-width: 500px;
+  overflow: hidden;
 }