body{ background:url(back.jpg); font-family:Arial, Helvetica, sans-serif; padding:0; font-size:12px; margin:0 auto; color: #0e4354; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; } #_box_login{ width: 550px; margin: 0px auto; background:url(login_box.png); margin-top: 120px; height: 320px; } ._logo{ display: block; margin: 0 auto; width: 300px; margin-top: 50px; margin-bottom: -100px; } .searchfield{ margin-left: 110px; height: 40px; width: 400px; font-weight: bold; font-size: 14px; font-family: arial; color: #181818; border: none; } #userName{ margin-top: 80px; } #password{ margin-top: 20px; } #submit{ margin-top: 30px; width: 450px; height: 40px; background-color: #072c71; color: #fff; font-family: arial; font-weight: bold; border: none; } ._titleLogin{ position: absolute; margin-left: 40px; margin-top: 20px; color: #fff; font-family: arial; font-size: 14px; } ._lupa_password{ text-align: center; color: #fff; font-family: arial; } ._link{ text-decoration: none; color: #fff; font-family: arial; font-weight: bold; font-size: 18px; margin-left: 30px; margin-bottom: 20px; } ._sjcom{ position: absolute; bottom: 0; } ._right_bottom{ position: absolute; right: 0; bottom: 0; } ._left20px{ padding-left: 20px; } /* --- Mobile: box and logo scale together; flex centering on handles the horizontal position --- */ @media screen and (max-width: 620px) { #_box_login{ transform: scale(0.9); transform-origin: top center; margin-top: 60px; margin-bottom: -32px; } ._logo{ width: 270px; margin-top: 45px; margin-bottom: -55px; } } @media screen and (max-width: 500px) { #_box_login{ transform: scale(0.72); margin-top: 40px; margin-bottom: -90px; margin-left: -30px; } ._logo{ width: 216px; margin-top: 36px; margin-bottom: -40px; } } @media screen and (max-width: 380px) { #_box_login{ transform: scale(0.58); margin-top: 60px; margin-bottom: -134px; margin-left: -90px; } ._logo{ width: 174px; margin-top: 29px; margin-bottom: -28px; } }