fix(homepage): mobile margins

debtcollective · Sep 9, 2019 · 9bbeda4 · 9bbeda4
1 parent 8038eb9
commit 9bbeda4
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/app/assets/stylesheets/static_pages.scss b/app/assets/stylesheets/static_pages.scss
@@ -93,16 +93,20 @@
     }
 
     &--plan {
-      min-width: 18rem;
+      min-width: 100%;
       max-width: 24rem;
       flex: 1;
-      margin: 1rem 2rem;
+      margin: 1rem 0;
       background: white;
       border: 1px solid $secondary-color;
       color: $secondary-color;
       border-radius: 0.4rem;
       padding: 1.5rem;
 
+      @media (min-width: 80rem) {
+        margin: 1rem 2rem;
+      }
+
       &:nth-child(even) {
         background-color:lighten($primary-color,55);
         border-color: $primary-color;
@@ -152,15 +156,19 @@
     }
 
     &--product {
-      min-width: 18rem;
+      min-width: 100%;
       max-width: 24rem;
       flex: 1;
-      margin: 1rem 2rem;
+      margin: 1rem 0;
       background: $primary-color;
       border: 1px solid $secondary-color;
       border-radius: 1rem;
       overflow: hidden;
 
+      @media(min-width: 80rem) {
+        margin: 1rem 2rem;
+      }
+
       img { // fix for odd image export from Figma
         display: block;
         height: 101%;