Ионный/угловой Один и тот же дисплей в каждом устройстве

#angular #ionic-framework

Вопрос:

Я создал приложение, но я хочу, чтобы оно выглядело одинаково на всех устройствах. На моем устройстве все выглядит нормально, но, например, телефон моих друзей меньше моего, поэтому он выглядит плохо и не так, как у меня. Как я могу это исправить ? мой код :

  <div *ngIf="posts">

<ion-card *ngFor="let item of posts.results;index as i" (click)="videomodal(item.id)" >


  <div >
    <ion-card-title style="font-size: 18px; margin-left: 10px; margin-top: 10px; margin-bottom: 15px; color: #7e2828;">
      <strong>{{item.title}}</strong></ion-card-title>
    <ion-card-subtitle style="font-size: 1em;">
      <ion-label style=" font-size: 1em;
       color: #696363;
       font-weight: 600;
       margin-left: 10px;">Çıkış Tarihi : {{item.release_date}} </ion-label>
      <ion-label style="margin-left: 15px;
       
       font-size: 100%;
       color: #696363;
       font-weight: 600;">Ortalama Oy

        <ion-badge style="padding:5px;" [class]="getClass(item.vote_average)"> {{item.vote_average}} </ion-badge>
      </ion-label>
    </ion-card-subtitle>

    <img style="margin-left: 5%; border-radius: 15px; margin-top: 10px;" bind-src=resim item.poster_path
      height="300em" width="200em">
    <ion-card-content>
      <i style="font-size: 17px; color: #211c1c;"> {{item.overview}} </i>
    </ion-card-content>
  </div>

</ion-card>
 

Вот как я хочу выглядеть в каждом телефоне : https://prnt.sc/12mlarb

Вот как это выглядит на небольших устройствах : https://prnt.sc/12mlg6i