Merge pull request #1953 from WPO-Foundation/signup-mobile-fixes

Signup mobile fixes
catchpoint · Jun 2, 2022 · a616b56 · a616b56
2 parents 6be21dd + d1741ac
commit a616b56
Showing 1 changed file with 25 additions and 89 deletions.
diff --git a/www/css/account.css b/www/css/account.css
@@ -558,92 +558,7 @@ body.theme-b {
  * End signup step 1
  */
 
-.card-container {
-  display: flex;
-  flex-direction: row;
-  align-content: center;
-  justify-content: space-around;
-  max-width: 780px;
-  margin: 0 auto;
-}
-
-.card-container .card {
-  display: block;
-  width: 370px;
-  height: 715px;
-  padding: 0;
-}
-
-.card-container .card fieldset {
-  padding: 20px 30px 30px;
-  margin: 0;
-  border: 0;
-}
-
-.card-container .card fieldset legend {
-  padding-top: 1.875rem;
-  text-align: center;
-  font-size: 28px;
-  font-weight: 300;
-  color: #111111;
-  line-height: 2.375rem;
-}
-
-.card-container .card fieldset h3 {
-  font-size: 1.5rem;
-  line-height: 1.6rem;
-  margin: 0;
-  padding: 0.5625rem 0;
-  font-weight: 400;
-}
-
-.card-container .card fieldset select {
-  font-size: 1.5rem;
-  padding: 0.5625rem 31.5px 0.5625rem 10px;
-  line-height: 1.6rem;
-  border: 1px solid #666666;
-}
-
-.card-container .card fieldset .price {
-  margin: 10px 0 20px;
-}
-
-.card-container .card button[type="submit"] {
-  appearance: none;
-  width: 100%;
-  border: 0;
-  background: #F9D856;
-  border-radius: 4px;
-  padding: 1rem 0;
-}
-
-.card .annual,
-.card .monthly {
-  display: none;
-}
-
-.card .annual.selected,
-.card .monthly.selected {
-  display: block;
-}
-
-.benefits-list {
-  border-top: 1px solid #D0D0D0;
-  margin-top: 1rem;
-}
-
-.benefits-list li {
-  padding: .5rem 20px;
-}
 
-.benefits-list li:nth-child(even) {
-  background: #F8F8F8;
-}
-
-
-/**
- * end signup steps
- */
 
 
 /**
@@ -786,7 +701,6 @@ body.theme-b {
 .signup-button {
   appearance: none;
   width: auto;
-  padding: 0.9375rem 0;
   background-color: #F9D856;
   border: 0;
   border-radius: 2rem;
@@ -1404,7 +1318,11 @@ table.sortable th:not([aria-sort]) button:hover span::after {
   .comparison-table thead th {
     display: block;
     width: 50%;
-    font-size: 20px;
+    font-size: 1rem;
+  }
+
+  .comparison-table thead th {
+    padding: 0.8em 0.3em;
   }
 
   .comparison-table tbody tr th:first-child {
@@ -1432,6 +1350,13 @@ table.sortable th:not([aria-sort]) button:hover span::after {
   }
 }
 
+@media screen and (max-width: 370px) {
+
+  .comparison-table tbody td,
+  .comparison-table thead th {
+    font-size: 0.9rem;
+  }
+}
 
 /* comparison table content */
 
@@ -1482,7 +1407,7 @@ table.sortable th:not([aria-sort]) button:hover span::after {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
-  font-size: 22px;
+  font-size: 1.375rem;
   line-height: 30px;
   color: #2f80ed;
   text-align: center;
@@ -1693,7 +1618,14 @@ ul.bulleted-list {
   margin-left: 2rem;
 }
 
+
+
 @media (max-width: 85em) {
+  .plan-selector .runs {
+    height: 45px;
+    padding: 0.5em;
+  }
+
   .signup-flow-step-1-layout h1 {
     font-size: 2.3rem;
   }
@@ -1715,7 +1647,7 @@ ul.bulleted-list {
   }
 
   .signup-step-1-content {
-    padding: 0 1.5rem;
+    padding: 0 1rem;
   }
 
   .signup-step-1-content h2 {
@@ -1733,6 +1665,10 @@ ul.bulleted-list {
   dl.faq button {
     font-size: 1.15rem;
   }
+
+  .comparison-table .signup-button {
+    padding: 0.7em 0.7em;
+  }
 }
 
 @media (min-width: 40em) {