title: Different versions of android, different display
body: <p>I have created a mobile application using ionic framework. It consist of many html pages. For android version <strong>KitKat</strong>, the pages are displaying correctly. For android version <strong>Jellybean</strong>, the pages are displaying differently. Please see the html &amp;css code?</p>
  
  <p><strong>Login.html</strong></p>
  
  <pre><code>&lt;ion-view hide-nav-bar="true "&gt;
      &lt;ion-content scroll="false"&gt;
          &lt;div class="row" style="padding:29px"&gt;
              &lt;div class="col"&gt;
                  &lt;div class="text-center"&gt;
                      &lt;h1 class="text-font-white"&gt;Welcome&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                  &lt;div class="line-white"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                  &lt;input class="input" placeholder="{{user}}"&gt;
                  &lt;/input&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                  &lt;input class="input" type="password" placeholder="{{password}}"&gt;
                  &lt;/input&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row" style="padding:30px 0"&gt;
              &lt;div class="col"&gt;
                  &lt;button type=submit id="login-btn" ng-click="doLogin()"&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row" style="padding:2px 0"&gt;
              &lt;div class="col"&gt;
                  &lt;button type=submit class="btn-white" ng-click="openRegistration()"&gt;Register your account&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row" style="padding:34px 0"&gt;
              &lt;div class="col"&gt;
                  &lt;div class="item item-image" id="logo"&gt;
                      &lt;img src="img/logo.png"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                  &lt;div class="text-center"&gt;
                      &lt;h4&gt;Forgot password?
                  &lt;span&gt;&lt;a href="#/forgetpwd" style="text-decoration:none;color:white"&gt;
                        Recover it&lt;/a&gt;&lt;/span&gt;
                      &lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p><strong>style.css</strong> [I have included styles that is related to Log.html page]</p>
  
  <pre><code>ion-view {
      background-image: url("../img/bg.png") !important;
      background-repeat: no-repeat;
      background-size: cover
  }
  .text-font-white {
      color: white;
  }
  .text-font-white {
      color: white;
  }
  .line-white {
      width: 100%;
      background-image: url("../img/title_line_white.png");
      background-position: center;
      background-repeat: no-repeat;
      height: 20px
  }
  .input {
      width: 97%;
      background: white;
      border-radius: 20px;
      border: 2px solid rgba(256, 256, 256, .4);
      padding: 4px;
      font-family: 'Lato-Black';
  }
  #login-btn {
      width: 97%;
      background: transparent;
      border-radius: 20px;
      border: 2px solid rgba(256, 256, 256, .4);
      padding: 14px;
      background-image: url("../img/icon_key.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 28px;
  }
  
  #logo {
      background-color: transparent;
      border-width: 0
  }
  </code></pre>
  
  <p>Different versions of android shows design differently, how to solve the problem?</p>