title: Need help in creating my login box Responsive
body: <p>Hi i am new to programming so i am really sorry if my issue was easy to solve</p>
  <p>I have a website with a login for but i am unable to make that form responsive every time i try doing that the whole thing get ruined</p>
  <p>May somebody help me please
  Here is my code:</p>
  <p>Login.Php:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;User Login&lt;/title&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/cdn-cgi/apps/head/7MFhwiAWv7ZVSNw1QEVHMkUawb0.js&quot;&gt;&lt;/script&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;Styles/Login.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;Styles/General.css&quot;&gt;
  &lt;/head&gt;
   &lt;body&gt;
  &lt;!-- Messenger Chat Plugin Code --&gt;
  &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
    &lt;script&gt;
      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v10.0'
        });
      };
  
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    &lt;/script&gt;
  
    &lt;!-- Your Chat Plugin code --&gt;
    &lt;div class=&quot;fb-customerchat&quot;
      attribution=&quot;setup_tool&quot;
      page_id=&quot;104580131776579&quot;&gt;
    &lt;/div&gt;
    
  &lt;a class=&quot;btn btn-danger&quot; href=&quot;index.html&quot;&gt;Cancel&lt;/a&gt;
  
  &lt;div&gt;
      &lt;h1 style=&quot;font-size: 20px&quot;&gt;Please Login after you Register if you don't have an account.&lt;/h1&gt;
      &lt;div&gt;
      &lt;div class=&quot;form-box&quot;&gt;
          &lt;div class=&quot;button-box&quot;&gt;
              &lt;div id=&quot;btn&quot;&gt;&lt;/div&gt;
                  &lt;button type=&quot;button&quot; class=&quot;toggle-btn&quot; onclick=&quot;Login()&quot;&gt;
                      Login
                  &lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;toggle-btn&quot; onclick=&quot;Register()&quot;&gt;
                      Register
                  &lt;/button&gt;
          &lt;/div&gt;
  
              &lt;form action=&quot;validation.php&quot; method=&quot;POST&quot; id=&quot;Login&quot; class=&quot;input-group&quot;&gt;
                  &lt;input type=&quot;email&quot; name=&quot;email&quot; class=&quot;input-field&quot; placeholder=&quot;Email&quot; required&gt;
                  &lt;input type=&quot;password&quot; name=&quot;password&quot; class=&quot;input-field&quot; placeholder=&quot;Password&quot; required&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;submit-btn&quot;&gt;Login&lt;/button&gt;
              &lt;/form&gt;
  
              &lt;form action=&quot;registeration.php&quot; method=&quot;POST&quot; id=&quot;Register&quot; class=&quot;input-group&quot;&gt;
                  &lt;input type=&quot;email&quot; name=&quot;email&quot; class=&quot;input-field&quot; placeholder=&quot;Email&quot; required&gt;
                  &lt;input type=&quot;text&quot; name=&quot;username&quot; class=&quot;input-field&quot; placeholder=&quot;Username&quot; required&gt;
                  &lt;input type=&quot;password&quot; name=&quot;password&quot; class=&quot;input-field&quot; placeholder=&quot;Password&quot; required&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;submit-btn&quot;&gt;Register&lt;/button&gt;
              &lt;/form&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
      var X = document.getElementById(&quot;Login&quot;); 
      var Y = document.getElementById(&quot;Register&quot;); 
      var Z = document.getElementById(&quot;btn&quot;); 
  
      function Register() {
          X.style.left = &quot;-400px&quot;;
          Y.style.left = &quot;50px&quot;;
          Z.style.left = &quot;110px&quot;;      
      }
      function Login() {
          X.style.left = &quot;50px&quot;;
          Y.style.left = &quot;450px&quot;;
          Z.style.left = &quot;0&quot;;      
      }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Login.css</p>
  <pre><code>*{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: white;
  }
  body{
  background: linear-gradient(rgba(0, 0, 50, 0.5),rgba(0, 0, 50, 0.5));
  background-image: url(../Images/Login-Background.png);
  }
  .hero{
  height: 100%;
  width: 100%;
  }
  .form-box{
  width: 380px;
  height: 480px;
  position: relative;
  margin:auto;
  background: #191919;
  padding: 5px;
  overflow: hidden;
  }
  .button-box{
  width: 224px;
  margin: 35px auto;
  position: relative;
  box-shadow: 0 0 20px 9px #ff61241f;
  border-radius: 30px;
  }
  .toggle-btn{
  padding: 10px 30px;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none;
  position: relative;
  }
  #btn{
  top: 0;
  left: 0;
  position: absolute;
  width: 110px;
  height: 100%;
  background: linear-gradient(to right, #ff105f,#ffad06);
  border-radius: 30px;
  transition: .5s;
  
  
  }
  .input-group{
  top: 180px;
  position: absolute;
  width: 280px;
  transition: .5s;
  }
  .input-field{
  width: 100%;
  padding: 10px 0;
  margin: 5px 0;
  border-left: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #999;
  outline: none;
  background: transparent;
  }
  .submit-btn{
  width: 85%;
  padding: 10px 30px;
  cursor: pointer;
  display: block;
  margin: auto;
  background: linear-gradient(to right, #ff105f,#ffad06);
  border: 0;
  outline: none;
  border-radius: 30px;
  }
  #Login{
  left: 50px;
  }
  #Register{
  left: 450px;
  }
  h1{
  color: #fff !important;
  margin-top: 50px !important;
  text-align: center;
  text-transform: uppercase;
  }
  h3{
  color: #fff;
  text-align: center;
  }
  button:focus{
  outline: none;
  box-shadow: none;
  }
  </code></pre>
  <p>General.css</p>
  <pre><code>html,body{
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: cover;
  top:0px;
  left:0px;
  height: 100%;
  min-height: 100%;
  }
  </code></pre>
  <p>I am really sorry but i couldn't do that please help me</p>
  <p>I am totally new to programming</p>
  <p>TIA!</p>