Made the heading of the page smaller on very small screens.

LibGuide-home.html

@@ -7,10 +7,8 @@
             <div id="s-lib-bc">
                 {{breadcrumbs}}
             </div>
-            <h1 id="s-lib-public-header-title">{{title}}
-</h1>
-            <div id="s-lib-public-header-desc">{{system_intro}}
-</div>
+            <h1 id="s-lib-public-header-title">{{title}}</h1>
+            <div id="s-lib-public-header-desc">{{system_intro}}</div>
         </div>
         <!-- END: Content Header -->
         <!-- BEGIN: Nav Bar -->

LibGuide.css

@@ -27,6 +27,16 @@
     color:white;
 }
 
+/* makes the heading smaller on very small screens */
+
+@media (max-width: 420px) {
+    h1 {
+        font-size: 25px;
+    }
+   #nav-title-spacer {
+        width: inherit;
+    }
+}
 /* Making the pills the right color */
 
 a.label.label-info:hover {