Tukukkk

What i want is my ion content to fit to device screen. I want reduce or expand ion-content instead of scroll.

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.

I have following HTML:

<ion-content padding class="card-background-page " no-bounce>

 <ion-row>

    <ion-col (click)="goPage(4)">

        <ion-card>

          <img src="assets/imgs/kid.png"/>

          <div class="card-title">Lorem Ipsum</div>

        </ion-card>

    </ion-col>

    <ion-col (click)="goPage(4)">

        <ion-card>

          <img src="assets/imgs/kid.png"/>

          <div class="card-title">Lorem Ipsum</div>

        </ion-card>

    </ion-col>

</ion-row>

<ion-row>

    <ion-col (click)="goPage(4)">

        <ion-card>

          <img src="assets/imgs/kid.png"/>

          <div class="card-title">Lorem Ipsum</div>

        </ion-card>

    </ion-col>

  <ion-col (click)="goPage(4)">

      <ion-card>

        <img src="assets/imgs/kid.png"/>

        <div class="card-title">Lorem Ipsum</div>

      </ion-card>

  </ion-col>

</ion-row>

<ion-row>

    <ion-col (click)="goPage(4)">

        <ion-card>

          <img src="assets/imgs/kid.png"/>

          <div class="card-title">Lorem Ipsum</div>

        </ion-card>

    </ion-col>

    <ion-col (click)="goPage(4)">

        <ion-card>

          <img src="assets/imgs/kid.png"/>

          <div class="card-title">Lorem Ipsum</div>

        </ion-card>

    </ion-col>

</ion-row>

</ion-content>

CSS

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;

        }

      }

}

StackBlitz Url: here

What is your advice or directive?
Thanks.

So the problem is that it wasn't responsive enough and it can be tricky to get something responsive in an ionic 3 app, since in that page you have the ion-content wich has .scroll-content and .fixed-content inside, also the tab doesn't "push" the content up, ionic simply add an exact amount of margin to the content so it doesn't collide with the footer.

So here is what i've done:

HTML:

<ion-content class="card-background-page">

  <div class="buttons">

    <ion-card>

      <img src="https://i.imgur.com/YpXomyN.png"/>

      <div class="card-title">Lorem Ipsum</div>

    </ion-card>

    <ion-card>

      <img src="https://i.imgur.com/YpXomyN.png"/>

      <div class="card-title">Lorem Ipsum</div>

    </ion-card>

    <ion-card>

      <img src="https://i.imgur.com/YpXomyN.png"/>

      <div class="card-title">Lorem Ipsum</div>

    </ion-card>

    <ion-card>

      <img src="https://i.imgur.com/YpXomyN.png"/>

      <div class="card-title">Lorem Ipsum</div>

    </ion-card>

    <ion-card>

      <img src="https://i.imgur.com/YpXomyN.png"/>

      <div class="card-title">Lorem Ipsum</div>

    </ion-card>

    <ion-card>

      <img src="https://i.imgur.com/YpXomyN.png"/>

      <div class="card-title">Lorem Ipsum</div>

    </ion-card>

  </div>

</ion-content>

CSS:

page-home {

  ion-content{

    background: url('https://i.imgur.com/olLunTc.jpg')no-repeat fixed;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

  }



  .scroll-content {

    overflow-y: hidden;

  }

  .card-background-page {

    .buttons {

      display: grid;

      grid-template: repeat(3, 1fr) / repeat(2, 1fr);

      height: calc(100vh - 55px); // i've added this number of pxls, but you can inspect and get the exact amount of the tab footer

    }

    ion-card {

      display: flex;

      flex-direction: column;

      text-align: center;

      align-items: center;

      background-color: transparent;



      img {

        width: 80%;

      }

      .card-title {

        font-size: 2rem;

        width: 100%;

        color: #fff;

        font-family: auto;

      }

    }

  }

}

So first i removed the ionic grid from your code and instead used CSS grid to do the job. Ionic grid is good, it does a great job as a responsive grid, but you can't control it enough, so for this CSS grid is better.

I created an div with class buttons to hold the "menu", it has a calculated height so it can fit the whole content removing the tab height. This alone'll make your content stretch only to that area.

So with this the cards will respect the rows and columns of the CSS grid, now the job is making the image and text responsive and that's easy using % for the image and rem for the text.

I've asked about the amount of items in that menu because it'll look strange if it's more than 6 items, you'll need to modify the number of rows in the first argument of grid-templates. So 8 or more items will make the image smaller and depending of what you want to show it'll not be good, in that case i advice removing the image, you can even put all items inside and array and use and conditional to show it only if array.length <= 6, something like

.TS

public menu: any = [{img: "url", text: "menu text"}, ...];

HTML

<ion-card *ngFor="let item of menu">

  <img [src]="item.img" *ngIf="menu.length <= 6"/>

  <div class="card-title">{{item.text}}</div>

</ion-card>

So this what i've came up with, sorry for the delay and hope this helps :D