Footer clash with side menu resolved

_layouts/default.html

@@ -32,17 +32,22 @@ <h3>Current projects</h3>
     <h3>Want to know your first PR?</h3>
 
     <p class="view"><a href="http://firstpr.me">firstpr.me</a></p>
+
+
+
   </header>
   <section>
 
     {{ content }}
 
   </section>
-  <footer>
-    <p>This project is maintained by <a href="https://www.github.com/my-first-pr">my-first-pr</a></p>
 
-    <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
+  <footer>
+    <p>This project is maintained by <a href="https://www.github.com/my-first-pr">my-first-pr</a><br />
+
+    <small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
   </footer>
+
 </div>
 <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
 {% if site.google_analytics %}
@@ -85,4 +90,4 @@ <h3>Want to know your first PR?</h3>
   request.send();
 </script>
 </body>
-</html>
+</html>

assets/css/style.scss

@@ -0,0 +1,55 @@
+---
+---
+
+@import "{{ site.theme }}";
+
+body{
+    padding: 10px;
+}
+
+header{
+    height: 90%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+footer{
+    bottom: 0px;
+}
+
+footer p{
+    margin: 0px 0px 10px;
+}
+
+/*Media Queries for adjusting height of header section for different screen resolution*/
+
+@media only screen and (max-height: 512px) {
+    header{
+        height: 80%;
+        overflow-x: hidden;
+        overflow-y: scroll;
+    }
+}
+
+@media only screen and (max-height: 360px) {
+    header{
+        height: 70%;
+        overflow-x: hidden;
+        overflow-y: scroll;
+    }
+}
+
+@media only screen and (max-height : 240px) {
+    header{
+        height: 60%;
+        overflow-x: hidden;
+        overflow-y: scroll;
+    }
+}
+
+@media only screen and (max-width: 960px) {
+    header{
+        overflow-x: hidden;
+        overflow-y: hidden;
+    }
+}