Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: responsive layout

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy 2019-01-29 16:45:35 +07:00
parent db0a0fc937
commit 7b4dfa2a66
2 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/common/pages/Vouchers/Checkout/index.js
View File

@ -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,7 +106,7 @@ export class CheckoutVouchers extends React.Component {
</div>
</Card>
</div>
<div className="row">
<div className="bottom-card">
<Card>
<div className="row">
<div style={{display:'flex',justifyContent:'space-between'}}>

39
src/common/pages/Vouchers/Checkout/style.scss
View File

@ -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{