ionic 4 ion-col showing too much space in iphone x

Question

I have a simple grid but the problem is its showing too much space on top of images.

html

<ion-grid style="height: 100%">
  <ion-row class="ion-align-items-center ion-justify-content-center">
    <ion-col size="6" *ngFor="let x of data" >
      <ion-card class="card-img" (click)="detail()">
          <img src="../../assets/img/demo.jpg" >
          <div style="text-align: center;" class="boxe">
          <ion-icon name="checkmark" class="tick" color="medium"></ion-icon>
          <ion-icon name="close" class="cross" color="dark"></ion-icon>
        </div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

scss

.card-img{
  border-radius: 10px;
}

.tick{    
  text-align:center;
  font-size: 30px; 
}
.cross{    
  text-align:center;
  font-size: 30px;
}

ion-card{
  margin: 0px

  img{
    width:100%;
  }
}

.no-shadow{
  box-shadow: none !important;
}


ion-row{
    ion-card{
        width:100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    matgin-top: 0 !important;
    img{
        width:100%;
    }
}
}

As you can see in image i add black lines on space i need to remove this space or add little space like 4 5px.

Answer 1

You just need to remove margin top and the bottom on ion-card .

Change this to:

ion-row{
    ion-card{
        width:100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    matgin-top: 0 !important;
    img{
        width:100%;
    }
}

This:

ion-row{
    ion-card{
    width:100% !important;
    margin: 0 !important; // I also dont think important is neccesary
    img{
        width:100%;
    }
}