Problem in Responsive Responsiveness

[thiagosaadofficial]

I created an application, and the elements were great in all smartphones, but in Ipads / Tablets is this problem of the images below, how to fix?

Home.html

<img [src]=“urlLogoImg”/>

      <ion-col width-50>
        <div class="textHeader">
          <p color="light" text-center>
            {{titleLogo}}
          </p>
        </div>
      </ion-col>
    </ion-row>
    </ion-toolbar>
  </ion-navbar>
</ion-header>

<ion-content Scroll="false" padding>
  <ion-card (click)='goToValorHora();'>
    <img [src]="urlCardImgFirst"/>
    <div class="card-title">{{titleCardFirst}}</div>
    <div class="card-subtitle">{{subtitleCardFirst}}</div>
  </ion-card>

  <ion-card (click)='goToValorProjeto();'>
    <img [src]="urlCardImgSecond"/>
    <div class="card-title">{{titleCardSecond}}</div>
    <div class="card-subtitle">{{subtitleCardSecond}}</div>
  </ion-card>
</ion-content>

Home.scss
page-home {
p {
font-family: ‘impact’;
font-size: 100%;

  }

  /* Header */
  .imgHeader {
    width: 40%;
    margin-top: 10%;
    margin-left: 13%;
  }
  .textHeader {
    font-size: 200%;
    text-shadow: 1px 1px 1px rgb(0,0,0);
    margin-left: -50%;
  }

  /* Cards */
  ion-card {
      position: relative;
      text-align: center;
  }

  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgb(0,0,0);
  }
  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgb(0,0,0);
  }

}