stest/public/css/mobile.css

/* 5 */
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
     /* dialog */
    #dialog {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        margin: 0;
        border-radius: 0;
    }
    .container{
    	width: inherit;
    }
    .Header {
        margin-bottom: 3rem;
    }
    /* Logo */
    .Header-logoWrap {
        margin: 3rem auto;
    }
    .Header-companyName {
        margin-top: 3rem;
    }
    .Header-purchaseDescription {
        margin-bottom: 1rem;
    }
    /* username */
    #login_div #username {
        margin-top: 1.5rem;
    }
    #login_div #username, #login_div #password {
        /* width: 15rem; */
    }
    /* Change */
    #pay_div #paymentForm .pay_change {
        margin-left: 8.8rem;
    }
    /* OTP */
    #otp {
        width: 9rem !important;
    }
    /* Get OTP  */
    #get_otp {
        width: 6rem;
        margin-left: 1.4rem;
        height: 2.2rem;
    }
    /* success page */
    .payBox {
        width: 100vw;
        height: 100vh;
    }
    .pay_alr2{
        margin: 37rem 3rem;
    }
    .pay_alr2s1 {
        font-size: 3rem;
    }
} 

@media only screen and (max-device-width :480px){ } 
@media only screen and (min-device-width :481px){ } 
 
/*6*/ 
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ 
    /* dialog */
    #dialog {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        margin: 0;
        border-radius: 0;
    }
    .container{
    	width: inherit;
    }
    .Header {
        margin-bottom: 3rem;
    }
    /* Logo */
    .Header-logoWrap {
        margin: 3rem auto;
    }
    .Header-companyName {
        margin-top: 3rem;
    }
    .Header-purchaseDescription {
        margin-bottom: 1rem;
    }
    /* username */
    #login_div #username {
        margin-top: 1.5rem;
    }
    #login_div #username, #login_div #password {
        /*width: 18.5rem;*/
    }
    /* Change */
    #pay_div #paymentForm .pay_change {
        padding: 0 0 0 3rem;
    }
    /* OTP */
    #otp {
        width: 13rem !important;
    }
    /* Get OTP  */
    #get_otp {
        width: 6rem;
        margin-left: 0.8rem;
        height: 2.2rem;
    }
    /* success page */
    .payBox {
        width: 100vw;
        height: 100vh;
    }
    .pay_alr2{
        margin: 37rem 3rem;
    }
    .pay_alr2s1 {
        font-size: 3rem;
    }
} 
 
/*6+ 6Plus*/ 
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ 
    /* dialog */
    #dialog {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        margin: 0;
        border-radius: 0;
    }
    .container{
    	width: inherit;
    }
    .Header {
        margin-bottom: 3rem;
    }
    /* Logo */
    .Header-logoWrap {
        margin: 3rem auto;
    }
    .Header-companyName {
        margin-top: 3rem;
    }
    .Header-purchaseDescription {
        margin-bottom: 1rem;
    }
    /* username */
    #login_div #username {
        margin-top: 1.5rem;
    }
    #login_div #username, #login_div #password {
       /*  width: 21rem; */
    }

    /* Change */
    #pay_div #paymentForm .pay_change {
        padding: 0 0 0 5.5rem;
    }
    /* OTP */
    #otp {
        width: 15rem !important;
    }
    /* Get OTP  */
    #get_otp {
        width: 6.5rem;
        margin-left: 0.8rem;
        height: 2.4rem;
        top: -0.1rem;
    }
    /* success page */
    .payBox {
        width: 100vw;
        height: 100vh;
    }
    .pay_alr2{
        margin: 37rem 3rem;
    }
    .pay_alr2s1 {
        font-size: 3rem;
    }
} 
 
/*meizu*/ 
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ } 
 
/*mate7*/ 
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ } 
 
/*4 4s*/ 
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }