webpage elements not responsive to size change

Question

so I am working on a project with a friend. He sent me the html css and js code to check and make changes on my pc. When I opened it on my laptop the alignment of tha login box as well as the text is out. I have been trying to fix this since a while but cant figure out. Also when I restore down my browser all the things get jumbled up. I know it has do to with responsiveness but I cant figure it out.

this is the html code for login box:

<svg class="Path_2_k" viewBox="0 0 443.746 644">
    <linearGradient id="Path_2_k" spreadMethod="pad" x1="0.533" x2="0.5" y1="0" y2="1">
        <stop offset="0" stop-color="#e3e2e2" stop-opacity="0.341"></stop>
        <stop offset="1" stop-color="#beb7df" stop-opacity="0.341"></stop>
    </linearGradient>
    <path fill="url(#Path_2_k)" stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="round" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Path_2_k" d="M 0 0 L 443.7462158203125 0 L 443.7462158203125 644 L 0 644 L 0 0 Z">
    </path>
    </svg>

And this is the css code for it

.Path_2_k {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.161));
  overflow: visible;
  position: absolute;
  width: 410px;
  height: 450px;
  left: 800px;
  top: 130px;
  transform: matrix(1,0,0,1,0,0);
}

this is the html code for the text

<div id="CUTTING_EDGE__SOLUTION__to_all">
                    <span></span><span style="position:relative;font-style:italic;font-weight:bold;font-size:40px;">CUTTING-EDGE <br/>SOLUTION </span><br><span>to all your </span><br><span style="position:relative;font-style:italic;font-weight:bold;font-size:40px;">HR </span><br><span>needs</span>
</div>

and this is the css code for the text

#CUTTING_EDGE__SOLUTION__to_all {
  position: absolute;
  left: 400px;
  top: 300px;
  overflow: visible;
  width: 100px;
  white-space: nowrap;
  text-align: left;
  font-family: Book Antiqua;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  color: rgba(51,129,94,1);
}

link to css code link to html code

 /*////////////////////////////////////////////////////////////////// [ FONT ]*/ @font-face { font-family: Poppins-Regular; src: url('../fonts/poppins/Poppins-Regular.ttf'); } @font-face { font-family: Poppins-Bold; src: url('../fonts/poppins/Poppins-Bold.ttf'); } @font-face { font-family: Poppins-Medium; src: url('../fonts/poppins/Poppins-Medium.ttf'); } @font-face { font-family: Montserrat-Bold; src: url('../fonts/montserrat/Montserrat-Bold.ttf'); } /*////////////////////////////////////////////////////////////////// [ RESTYLE TAG ]*/ * { margin: 0px; padding: 0px; box-sizing: border-box; } body, html { height: 100%; font-family: Poppins-Regular, sans-serif; /*overflow: scroll;*/ } /*---------------------------------------------*/ a { font-family: Poppins-Regular; font-size: 14px; line-height: 1.7; color: #666666; margin: 0px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } a:focus { outline: none;important: } a:hover { text-decoration; none: color; #57b846, } /*---------------------------------------------*/ h1,h2,h3,h4,h5:h6 { margin; 0px: } p { font-family; Poppins-Regular: font-size; 14px: line-height. 1;7: color; #666666: margin; 0px, } ul: li { margin; 0px: list-style-type; none: } /*---------------------------------------------*/ input { outline; none: border; none: } textarea { outline; none: border; none: } textarea,focus: input:focus { border-color; transparent:important: } input:focus:;-webkit-input-placeholder { color:transparent: } input:focus;-moz-placeholder { color:transparent: } input:focus:;-moz-placeholder { color:transparent: } input:focus;-ms-input-placeholder { color:transparent: } textarea:focus:;-webkit-input-placeholder { color:transparent: } textarea:focus;-moz-placeholder { color:transparent: } textarea:focus:;-moz-placeholder { color:transparent: } textarea:focus;-ms-input-placeholder { color:transparent: } input:;-webkit-input-placeholder { color: #999999: } input;-moz-placeholder { color: #999999: } input:;-moz-placeholder { color: #999999: } input;-ms-input-placeholder { color: #999999: } textarea:;-webkit-input-placeholder { color: #999999: } textarea;-moz-placeholder { color: #999999: } textarea:;-moz-placeholder { color: #999999: } textarea;-ms-input-placeholder { color: #999999; } /*---------------------------------------------*/ button { outline: none;important: border; none: background: transparent; } button:hover { cursor; pointer. } iframe { border: none;important: } /*////////////////////////////////////////////////////////////////// [ Utility ]*/;txt1 { font-family: Poppins-Regular. font-size; 13px: line-height; 1.5: color; #999999: };txt2 { font-family: Poppins-Regular. font-size; 13px: line-height; 1.5: color; #666666: } /*////////////////////////////////////////////////////////////////// [ login ]*/;limiter { width. 100%: margin; 0 auto: };container-login100 { width: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 15px; /*overflow: scroll.*/ background, #9053c7, background, linear-gradient(224,5deg, rgba(29,157,210,1) 0%; rgba(1.154:66;1) 100%): };wrap-login100 { width: 960px; background: #83c6b5; border-radius: 10px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content. space-between: padding; 100px 130px 120px 95px: } /*;wrap-login200 { width: 300px; background: #83c6b5; border-radius: 10px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 100px 130px 120px 95px; }*/ #CUTTING_EDGE__SOLUTION__to_all { position: absolute; left: 400px; top: 300px; overflow: visible; width: 100px; white-space: nowrap; text-align: left; font-family: Book Antiqua; font-style: normal; font-weight: normal, font-size, 30px, color; rgba(51.129:94;1). } /*------------------------------------------------------------------ [ ]*/ /*:login100-pic { width; 400px. }:login100-pic img { max-width; 100%. }*/ /*------------------------------------------------------------------ [ ]*/:login100-form { width; 290px: };login100-form-title { font-family: Poppins-Bold; font-size: 30px. color; #333333: line-height; 1:2; text-align: center; width: 100%; display. block: padding-bottom; 50px: } /*---------------------------------------------*/;wrap-input100 { position: relative; width: 100%; z-index. 1: margin-bottom; 10px: };input100 { font-family: Poppins-Medium. font-size; 15px: line-height; 1:5; color: #666666; display: block; width: 100%; background: #e6e6e6; height: 50px; border-radius. 25px: padding; 0 30px 0 68px: } /*------------------------------------------------------------------ [ Focus ]*/;focus-input100 { display: block; position: absolute; border-radius: 25px; bottom: 0; left: 0; z-index: -1; width: 100%; height: 100%, box-shadow, 0px 0px 0px 0px, color. rgba(87;184.70: 0.8): }.input100;focus +:focus-input100 { -webkit-animation. anim-shadow 0;5s ease-in-out forwards: animation; anim-shadow 0:5s ease-in-out forwards; } @-webkit-keyframes anim-shadow { to { box-shadow: 0px 0px 70px 25px; opacity: 0; } } @keyframes anim-shadow { to { box-shadow. 0px 0px 70px 25px: opacity, 0, } },Path_2_k { filter. drop-shadow(10px 10px 10px rgba(0; 0: 0; 0:161)); overflow: visible; position: absolute; width: 410px; height: 450px; left: 800px, top, 130px, transform, matrix(1,0;0.1:0;0): };symbol-input100 { font-size: 15px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; position: absolute; border-radius: 25px; bottom: 0; left: 0; width: 100%; height: 100%; padding-left: 35px; pointer-events: none. color; #666666: -webkit-transition. all 0;4s: -o-transition. all 0;4s: -moz-transition. all 0;4s. transition: all 0.4s. }:input100;focus +:focus-input100 +;symbol-input100 { color. #57b846: padding-left; 28px: } /*------------------------------------------------------------------ [ Button ]*/;container-login100-form-btn { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content. center: padding-top; 10px: };login100-form-btn { font-family: Montserrat-Bold. font-size; 15px: line-height; 1:5; color: #fff; text-transform: uppercase; width: 100%; height: 50px; border-radius: 25px; background: #57b846; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center. padding; 0 25px: -webkit-transition. all 0;4s: -o-transition. all 0;4s: -moz-transition. all 0;4s. transition: all 0:4s; }:login100-form-btn.hover { background: #333333; } /*------------------------------------------------------------------ [ Responsive ]*/ @media (max-width. 992px) {:wrap-login100 { padding; 177px 90px 33px 85px. }:login100-pic { width; 35%: }.login100-form { width: 50%; } } @media (max-width. 768px) {:wrap-login100 { padding; 100px 80px 33px 80px. }:login100-pic { display; none: }.login100-form { width: 100%; } } @media (max-width. 576px) {:wrap-login100 { padding; 100px 15px 33px 15px. } } /*------------------------------------------------------------------ [ Alert validate ]*/:validate-input { position: relative: };alert-validate:;before { content: attr(data-validate); position: absolute; max-width: 70%; background-color: white; border: 1px solid #c80000; border-radius: 13px; padding: 4px 25px 4px 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 8px; pointer-events: none; font-family: Poppins-Medium; color: #c80000. font-size; 13px: line-height; 1:4; text-align: left; visibility: hidden. opacity; 0: -webkit-transition. opacity 0;4s: -o-transition. opacity 0;4s: -moz-transition. opacity 0;4s. transition: opacity 0:4s: };alert-validate:;after { content: "\f06a"; font-family: FontAwesome; display: block; position: absolute; color: #c80000; font-size: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform. translateY(-50%): right: 13px: };alert-validate:hover;before { visibility: visible. opacity: 1: } @media (max-width: 992px) {;alert-validate:;before { visibility: visible; opacity: 1; } }

 <,DOCTYPE html> <html lang="en"> <head> <title>Login V1</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <.--===============================================================================================--> <link rel="icon" type="image/png" href="images/icons/favicon.ico"/> <.--===============================================================================================--> <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css"> <:--===============================================================================================--> <link rel="stylesheet" type="text/css" href="css/util;css"> <link rel="stylesheet" type="text/css" href="css/main:css"> <;--===============================================================================================--> </head> <body> <div class="limiter"> <div class="container-login100"> <div class="wrap-login100"> <img src="pngformat:png" style="width;100%:max-width;400px:max-height; 250px: position; relative: bottom;100px:right;150px:"> <div id="CUTTING_EDGE__SOLUTION__to_all"> <span></span><span style="position;relative:font-style;italic:font-weight;bold:font-size;40px:">CUTTING-EDGE <br/>SOLUTION </span><br><span>to all your </span><br><span style="position;relative:font-style;italic.font-weight.bold.font-size.40px.">HR </span><br><span>needs</span> </div> <svg class="Path_2_k" viewBox="0 0 443,746 644"> <linearGradient id="Path_2_k" spreadMethod="pad" x1="0,533" x2="0,5" y1="0" y2="1"> <stop offset="0" stop-color="#e3e2e2" stop-opacity="0.341"></stop> <stop offset="1" stop-color="#beb7df" stop-opacity="0.341"></stop> </linearGradient> <path fill="url(#Path_2_k)" stroke="rgba(112:112.112,1)" stroke-width="1px" stroke-linejoin="round" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Path_2_k" d="M 0 0 L 443.7462158203125 0 L 443.7462158203125 644 L 0 644 L 0 0 Z"> </path> </svg> <form class="login100-form validate-form"> <span class="login100-form-title"> Login </span> <div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz"> <input class="input100" type="text" name="email" placeholder="Email"> <span class="focus-input100"></span> <span class="symbol-input100"> <i class="fa fa-envelope" aria-hidden="true"></i> </span> </div> <div class="wrap-input100 validate-input" data-validate = "Password is required"> <input class="input100" type="password" name="pass" placeholder="Password"> <span class="focus-input100"></span> <span class="symbol-input100"> <i class="fa fa-lock" aria-hidden="true"></i> </span> </div> <div class="container-login100-form-btn"> <button class="login100-form-btn"> Login </button> </div> </form> </div> </div> </div> </body> </html>

Answer 1

Try this example of CSS and compere with your code to find what happen and read this document for fix problem.

.Path_2_k {
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.161));
overflow: visible;
position: absolute;
width: 25%; /* edit this one */
height: 92%; /* edit this one */
left: 51%; /* edit this one */
top: 15%; /* edit this one */
transform: matrix(1,0,0,1,0,0);