Making a simple page responsive through CSS : <p>I am using a simple half bootstrap / half designed by somebody login template. Now it opens just as it should through the web browser:</p>

<p><a href="https://i.stack.imgur.com/lKZNP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lKZNP.jpg" alt="enter image description here"></a></p>

<p>But when I open it through my mobile device it loads this way:</p>

<p><a href="https://i.stack.imgur.com/Jhvsl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jhvsl.png" alt="enter image description here"></a></p>

<p>And I want it to open in a close-up way like that:</p>

<p><a href="https://i.stack.imgur.com/D0YbC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D0YbC.png" alt="enter image description here"></a></p>

<p>Now here are my html and css:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background: #eee !important;
}

.form-signin {
  max-width: 380px;
  padding: 15px 35px 30px;
  margin: 20px auto;
  background-color: #fff;
  border: 1px round rgba(0, 0, 0, 0.1);
}

.form-signin .checkbox {
  margin-bottom: 30px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.form-signin-heading {
  color: #777;
}

.social-box{
  margin: 0 auto;
  padding: 20px 38px 0 38px;
}
.social-box a{
  font-weight:bold;
  font-size:18px;
  padding:8px;
}
.social-box a i{
  font-weight:bold;
  font-size:20px;
}
.newborder {
  border-bottom: 1px #ccc solid;
  margin-top: 30px;
  margin-bottom: 30px;
}
.omb_loginOr {
  position: relative;
  font-size: 1.5em;
  color: #aaa;
  margin-top: 1.5em;
  margin-bottom: 2.2em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.omb_loginOr .omb_hrOr {
  background-color: #cdcdcd;
  height: 1px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.omb_loginOr .omb_spanOr {
  display: block;
  position: absolute;
  left: 50%;
  top: -0.3em;
  margin-left: -1.5em;
  background-color: white;
  width: 3em;
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html &gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Bootstrap Snippet: Login Form&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/lstyle.css"&gt;
        &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
    &lt;link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;

  &lt;body&gt;

      &lt;div class="container"&gt;
        &lt;div class="form-signin"&gt;
    &lt;form&gt;
      &lt;h2 class="form-signin-heading text-center"&gt;&lt;i class="fa fa-tint fa-fw"&gt;&lt;/i&gt;Hello&lt;/h2&gt;


      &lt;div class="social-box"&gt;
        &lt;div class="row mg-btm"&gt;
          &lt;div class="col-md-12"&gt;
            &lt;a href="#" class="btn btn-primary btn-block"&gt;
              &lt;i class="fa fa-facebook fa-fw"&gt;&lt;/i&gt;    Log in
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="newborder"&gt;&lt;/div&gt;


      &lt;input type="text" class="form-control" name="username" placeholder="E-mail" required="" autofocus="" /&gt;
      &lt;input type="password" class="form-control" name="password" placeholder="Password" required=""/&gt;
      &lt;label class="checkbox text-right"&gt;
        &lt;input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"&gt; Remember me
      &lt;/label&gt;
      &lt;button class="btn btn-lg btn-info btn-block" type="submit"&gt;Log in&lt;/button&gt;
    &lt;/form&gt;


  &lt;div class="row omb_loginOr "&gt;
      &lt;hr class="omb_hrOr"&gt;
      &lt;span class="omb_spanOr"&gt;or&lt;/span&gt;
  &lt;/div&gt;


        &lt;form&gt;

          &lt;div class="alert alert-info"&gt;&lt;p&gt;No registration?&lt;/p&gt;&lt;/div&gt;
          &lt;input type="text" class="form-control" name="username" placeholder="E-mail" required="" autofocus="" /&gt;
          &lt;input type="password" class="form-control" name="password" placeholder="Password required=""/&gt;

          &lt;button class="btn btn-lg btn-info btn-block" type="submit"&gt;Register me &amp; log in&lt;/button&gt;
        &lt;/form&gt;

&lt;/div&gt;




  &lt;/div&gt;
    
    
    
    
    
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Huge thanks in advance!</p>
