adaptivity

front/src/assets/main.scss

@@ -21,6 +21,10 @@
     box-shadow: 0 0 4px rgba(#000, 0.5);
 
     z-index: 100;
+
+    @media(max-width: 768px) {
+        display: none;
+    }
 }
 body {
     padding-left: 2.5rem;

front/src/components/Promo/sidebar.vue

@@ -45,11 +45,11 @@ const sidebar_obj = ref()
 </template>
 <style scoped lang="scss">
 .sidebar {
-    width: 23vw;
+    max-width: 23vw;
     background-color: #fff;
     position: fixed;
     top: 0;
-    right: -27vw;
+    right: -50%;
     bottom: 0;
     transition: all 300ms linear;
     line-height: 1.25;
@@ -57,12 +57,14 @@ const sidebar_obj = ref()
     padding: 3rem 2rem 2rem;
 
     @media(max-width:768px) {
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
+        padding-top: 2rem;;
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        max-width: 48%;
     }
 
     &.open {
-        right: 0
+        right: 0;
     }
 
     &-close {
@@ -73,7 +75,7 @@ const sidebar_obj = ref()
         color: black;
 
         @media(max-width:768px) {
-            lefT: 0.5rem;
+            left: 0.5rem;
         }
     }
 
@@ -94,7 +96,11 @@ const sidebar_obj = ref()
     h2 {
         text-align: center;
         font-size: 2rem;
-        margin: 1rem
+        margin: 1rem;
+
+        @media(max-width:768px) {
+            font-size: 1.5rem;
+        }
     }
 
     p,
@@ -104,6 +110,10 @@ const sidebar_obj = ref()
 
     p {
         font-size: 1.25rem;
+
+        @media(max-width:768px) {
+            font-size: 1rem;
+        }
     }
 
     h3 {