From 7b4dfa2a668f7dc2dd39c3da0c343c0399614b83 Mon Sep 17 00:00:00 2001
From: Rifqy Zacky Ariadhy <rifqyzackya@gmail.com>
Date: Tue, 29 Jan 2019 16:45:35 +0700
Subject: [PATCH] update: responsive layout

---
 src/common/pages/Vouchers/Checkout/index.js   |  8 ++--
 src/common/pages/Vouchers/Checkout/style.scss | 39 +++++++++++++++++--
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/common/pages/Vouchers/Checkout/index.js b/src/common/pages/Vouchers/Checkout/index.js
index ca97bca..c172b0f 100644
--- a/src/common/pages/Vouchers/Checkout/index.js
+++ b/src/common/pages/Vouchers/Checkout/index.js
@@ -56,7 +56,7 @@ export class CheckoutVouchers extends React.Component {
 
     return (
       <div className="checkout-parent">
-        <div className="row">
+        <div className="upper-card">
           <Card>
             <div className="">
               <div style={{display:'flex',justifyContent:'center'}}>
@@ -74,7 +74,7 @@ export class CheckoutVouchers extends React.Component {
                 </div>
               </div>
               <div className="col s12 m7 l7">
-                <div style={{alignItems:'center', justifyContent: 'center'}}>
+                <div className={'right-container'}>
                   <Row>
                     <div className="col s12 m4">
                       <h3>Jenis Layanan</h3>
@@ -106,8 +106,8 @@ export class CheckoutVouchers extends React.Component {
             </div>
           </Card>
         </div>
-        <div className="row">
-          <Card >
+        <div className="bottom-card">
+          <Card>
             <div className="row">
               <div style={{display:'flex',justifyContent:'space-between'}}>
                 <h3 style={{color:''}}>Point</h3>
diff --git a/src/common/pages/Vouchers/Checkout/style.scss b/src/common/pages/Vouchers/Checkout/style.scss
index 429a854..28d8771 100644
--- a/src/common/pages/Vouchers/Checkout/style.scss
+++ b/src/common/pages/Vouchers/Checkout/style.scss
@@ -1,16 +1,47 @@
 @media(min-width: 1000px){
   .imageCard{
-    max-width: 20vw;
-    max-height: 20vw;
+    width: 20vw;
+    height: 25vh;
+  }
+
+  .upper-card{
+    width: 60vw;
+    margin-left: -1vw;
+    margin-bottom: 15px;
+  }
+
+  .bottom-card{
+    width: 60vw;
+    margin-left: -1vw;
+  }
+
+  .right-container{
+    //background-color: red;
+    height: 25vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    //align-items: center;
   }
 }
 
 @media(max-width: 999px){
   .imageCard{
-    max-width: 80vw;
-    max-height: 80vw;
+    width: 80vw;
+    height: 25vh;
     margin-bottom: 30px;
   }
+
+  .upper-card{
+    width: 90vw;
+    margin-left: -3.5vw;
+    margin-bottom: 15px;
+  }
+
+  .bottom-card{
+    width: 90vw;
+    margin-left: -3.5vw;
+  }
 }
 
 .checkout-parent{