title: Ionic how to fix ion content to fill the device screen size
body: <p>What i want is my ion content to fit to device screen. I want reduce or expand ion-content instead of scroll.</p>
  
  <p>Currently my page looks image below for Iphone 5 in chrome device toolbar. on the other hand, everything looks perfect for Iphone X because of device screen size. </p>
  
  <p>I have following <strong>HTML</strong>:</p>
  
  <pre><code>&lt;ion-content padding class="card-background-page " no-bounce&gt;
   &lt;ion-row&gt;
      &lt;ion-col (click)="goPage(4)"&gt;
          &lt;ion-card&gt;
            &lt;img src="assets/imgs/kid.png"/&gt;
            &lt;div class="card-title"&gt;Lorem Ipsum&lt;/div&gt;
          &lt;/ion-card&gt;
      &lt;/ion-col&gt;
      &lt;ion-col (click)="goPage(4)"&gt;
          &lt;ion-card&gt;
            &lt;img src="assets/imgs/kid.png"/&gt;
            &lt;div class="card-title"&gt;Lorem Ipsum&lt;/div&gt;
          &lt;/ion-card&gt;
      &lt;/ion-col&gt;
  &lt;/ion-row&gt;
  &lt;ion-row&gt;
      &lt;ion-col (click)="goPage(4)"&gt;
          &lt;ion-card&gt;
            &lt;img src="assets/imgs/kid.png"/&gt;
            &lt;div class="card-title"&gt;Lorem Ipsum&lt;/div&gt;
          &lt;/ion-card&gt;
      &lt;/ion-col&gt;
    &lt;ion-col (click)="goPage(4)"&gt;
        &lt;ion-card&gt;
          &lt;img src="assets/imgs/kid.png"/&gt;
          &lt;div class="card-title"&gt;Lorem Ipsum&lt;/div&gt;
        &lt;/ion-card&gt;
    &lt;/ion-col&gt;
  &lt;/ion-row&gt;
  &lt;ion-row&gt;
      &lt;ion-col (click)="goPage(4)"&gt;
          &lt;ion-card&gt;
            &lt;img src="assets/imgs/kid.png"/&gt;
            &lt;div class="card-title"&gt;Lorem Ipsum&lt;/div&gt;
          &lt;/ion-card&gt;
      &lt;/ion-col&gt;
      &lt;ion-col (click)="goPage(4)"&gt;
          &lt;ion-card&gt;
            &lt;img src="assets/imgs/kid.png"/&gt;
            &lt;div class="card-title"&gt;Lorem Ipsum&lt;/div&gt;
          &lt;/ion-card&gt;
      &lt;/ion-col&gt;
  &lt;/ion-row&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>page-menu {
      .hr{
          border: 0;
          clear:both;
          display:block;
          width: 96%;   
          background-color:#f3f6db;
          height: 1px;
      }
      .card-background-page {
          ion-card {
            position: relative;
            text-align: center;
            background-color: transparent;
          }
          .card-title {
            top: 74%;
            font-size: 2.0em;
            width: 100%;
            color: #fff;
            font-family: auto;
  
          }
          .card-subtitle {
            font-size: 1.0em;
            position: absolute;
            top: 52%;
            width: 100%;
            color: #fff;
          }
        }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/SwIo9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SwIo9.png" alt="enter image description here"></a></p>
  
  <p>StackBlitz Url: <a href="https://ionic-jtrowr.stackblitz.io/" rel="nofollow noreferrer">here</a></p>
  
  <p>What is your advice or directive?
  Thanks.</p>