styling/Add basic responsive functionality

Author: LewisYoul

app/assets/stylesheets/base.scss

@@ -41,3 +41,19 @@ strong { font-weight: 500 }
   max-width: 1080px;
   // height: 100vh;
 }
+
+#sidebar {
+  width: 22%;
+
+  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+    display: none;
+  }
+}
+
+#body {
+  width: 78%;
+
+  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+    width: 100%;
+  }
+}

app/views/layouts/application.html.erb

@@ -39,11 +39,10 @@
 
     <div id="app">
       <div style="display: flex;">
-        <div style="width: 22%;">
+        <div id="sidebar">
           <%= render 'shared/sidebar' %>
         </div>
-        <%# <div style="flex: 1; flex-basis: 25%; max-width: 25%;"></div> %>
-        <div style="width: 78%;">
+        <div id="body">
           <%= yield %>
         </div>
       </div>