Merge pull request vercel#68 from chec/fix/responsive-product-checkout

Fixed responsiveness on product detail view and checkout summary
persi123 · May 25, 2020 · 0c24402 · 0c24402
2 parents 2bd4298 + 56c7dd4
commit 0c24402
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/pages/checkout/index.js b/pages/checkout/index.js
@@ -417,7 +417,7 @@ class CheckoutPage extends Component {
               }
             </div>
 
-            <div className="col-12 col-md-5 offset-md-1">
+            <div className="col-12 col-lg-5 col-md-10 offset-md-1">
               <div className="bg-brand200 p-5 checkout-summary">
                 <div className="borderbottom font-size-subheader border-color-gray400 pb-2 font-weight-medium">
                   Your order
@@ -449,16 +449,16 @@ class CheckoutPage extends Component {
                     )
                   })}
                 </div>
-                <form className="d-flex py-3 borderbottom border-color-gray400">
+                <form className="row d-sm-inline-block py-3 borderbottom border-color-gray400">
                   <input
                     name="discountCode"
                     onChange={this.handleFormChanges}
                     value={this.state.discountCode}
                     placeholder="Gift card or discount code"
-                    className="mr-2 flex-grow-1"
+                    className="mr-2 col"
                   />
                   <button
-                    className="font-color-white border-none font-weight-medium px-4"
+                    className="font-color-white border-none font-weight-medium px-4 col-auto"
                     disable={!this.props.checkout}
                     onClick={this.handleDiscountChange}
                   >

diff --git a/style/scss/pages/_checkout.scss b/style/scss/pages/_checkout.scss
@@ -9,9 +9,5 @@
   .checkout-summary {
     position: sticky;
     top: 15%;
-
-    @include md-max {
-      width: 100%;
-    }
   }
 }
diff --git a/style/scss/pages/_product.scss b/style/scss/pages/_product.scss
@@ -8,6 +8,10 @@
     display: block;
   }
 
+  @include small-xs {
+    padding: 0 1.5rem;
+  }
+
   .product-sidebar {
     display: flex;
     top: 6.5rem;
@@ -38,6 +42,8 @@
 
     @include small-xs {
       padding: 1.5rem 0 0;
+      min-width: 15rem;
+      align-self: flex-start;
     }
   }
 }