Fix Responsieness

richardkanai123 · Aug 19, 2021 · 2354eba · 2354eba
1 parent 779a068
commit 2354eba
Showing 1 changed file with 22 additions and 25 deletions.
diff --git a/style.css b/style.css
@@ -22,7 +22,6 @@
 
 html{
     scroll-behavior: smooth;
-    width: 100vw;
 }
 
 a{
@@ -38,11 +37,14 @@ body{
     background-color: var(--light1-color);
     font-family: 'Roboto', sans-serif;
     position: relative;
-    overflow: hidden;
+    overflow: auto;
+    min-width:99vw;
+    max-width: 100vw;
 }
 
 header{
-    width: 100%;
+    width:100%;
+    top: 0;
     height: 10vh;
     display: flex;
     padding: 1.0rem;
@@ -400,7 +402,7 @@ ol li{
     width: 20%;
     height: 90vh;
     top: 10vh;
-    right: -50%;
+    right: 2%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -409,20 +411,18 @@ ol li{
     z-index: -10;
     padding: 0.5rem;
     transition: ease;
-    opacity: 0.1;
+    opacity: 0;
     transition: all 1s ease ;
     transform-style:preserve-3d;
     overflow: scroll;
 }
 
 .CartDiv.Show{
-    width: 40%;
+    width: 60%;
     opacity: 1.0;
     z-index: 10;
-    right: 0;
     pointer-events: all;
     position: fixed;
-
 }
 
 .CartHeader{
@@ -542,22 +542,17 @@ ol li{
     .CartDiv{
         position: absolute;
         width: 0vw;
-        height: 90vh;
+        height: 100%;
         top: 10vh;
-        right: 100%;
-        left: 100%;
         opacity: 0;
     }
 
     .CartDiv.Show{
-        width: 50vw;
+        width: 75%;
         opacity: 1.0;
         z-index: 10;
-        right: 0;
-        left: unset;
+        right: 5%;
         pointer-events: all;
-        position: fixed;
-
     }
 
 
@@ -573,14 +568,12 @@ ol li{
     }
 
     html{
-        max-width: 100vw;
         padding:0 0.5rem;
     }
      body{
         position: relative;
-        min-width: 100%;
-        max-width: 100%;
-        left: 0;
+        width: 100vw;
+        border: solid;
      }
 
      #logo{
@@ -807,21 +800,25 @@ ol li{
         margin: 0.25rem;
     }
 
-    .CartDiv{
-        min-width: 99%;
-        max-width: 100%;
+    .CartDiv.Show{
+        width: 100%;
+        left: 0.1%;
     }
 
     .CartItem{
-        width: 99vw;
+        width: 100%;
         display: flex;
         align-items: center;
         max-height: fit-content;
-        padding:0.25rem 0.5rem;
+        padding:0.25rem 0.25rem;
         margin: 0.25rem 0;
         justify-content: center;
     }
 
+    .CartItem img{
+        width:150px;
+    }
+
     .CartItem section{
         margin: unset;
         padding: unset;