Update index.html

Signed-off-by: Blake Arnold <[email protected]>

Author: blake437

index.html

@@ -8,7 +8,14 @@
   padding: 0;
   min-height: 100vh;
 }
-
+.tabs-align-wrap {
+  max-width: 480px;
+  width: 100%;
+  margin: 32px auto 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
 .above-tabs {
   display: flex;
   justify-content: center;
@@ -18,25 +25,24 @@
   border-radius: 8px 8px 0 0;
   box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
   padding: 10px 24px 42px 24px;
-  margin: 32px auto 0 auto;
-  max-width: 480px;
   gap: 14px;
   position: relative;
   z-index: 1;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
 }
-
 #tabs {
   display: flex;
   justify-content: center;
-  margin: -32px 0 0 0;
   position: relative;
   z-index: 2;
-  max-width: 480px;
   width: 100%;
-  left: 50%;
-  transform: translateX(-50%);
+  margin: 0;
+  left: 0;
+  transform: none;
+  box-sizing: border-box;
 }
-
 .tab {
   background: #f7f7f7;
   border: 1px solid #bbb;
@@ -53,47 +59,32 @@
   color: #555;
   z-index: 2;
 }
-
 .tab.active {
   background: #fff;
   font-weight: bold;
   border-color: #888 #888 #fff #888;
   z-index: 3;
   color: #222;
 }
-
 .tab-content {
   display: none;
   border: 1px solid #ccc;
   border-radius: 0 0 8px 8px;
   background: #fff;
   padding: 28px 32px 24px 32px;
-  margin: 0 auto 32px auto;
-  max-width: 480px;
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
   box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
   font-size: 15px;
-  width: 100%;
+  box-sizing: border-box;
 }
-
 .tab-content.active {
   display: block !important;
 }
-
 .tab:not(.active):hover {
   background: #ececec;
 }
-.tab-content {
-  display: none;
-  border: 1px solid #ccc;
-  border-radius: 0 0 8px 8px;
-  background: #fff;
-  padding: 28px 32px 24px 32px;
-  margin: 0 auto 32px auto;
-  max-width: 480px;
-  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
-  font-size: 15px;
-}
-
 .above-tabs input[type="text"], 
 .above-tabs input[type="number"] {
   width: 180px;
@@ -248,6 +239,9 @@
   border-color: #d22;
 }
 @media (max-width: 600px) {
+  .tabs-align-wrap {
+    max-width: 98vw;
+  }
   .tab-content {
     padding: 16px 4vw;
     max-width: 98vw;