Ion-row getting out context when testing on iphone 5

Ionic Framework ionic-v3
1

this is the piece of code… but it does not work properly when testing on Chrom-dev

.html:

  <ion-content>
    <ion-refresher>
             ////////
    </ion-refresher>

  <ion-card>
    <ion-card-header>///////</ion-card-header>
    <ion-card-content>
      ///////////
    </ion-card-content>

    <ion-row no-padding  class="animate-in-secondary">
  
       <ion-col>
         <button ion-button clear small color="primary" icon-left (click)="goToCompanyWebsite(job.company.data.company_website)">
         <ion-icon name="cloud-circle"></ion-icon>
          Website
         </button>
       </ion-col>

      <ion-col text-center>
        <button ion-button clear small color="primary" icon-left>
          <ion-icon name='logo-linkedin'></ion-icon>
          LinkedIn
         </button>
       </ion-col>

       <ion-col text-right>
         <button ion-button clear small color="primary" icon-left (click)="goToTweet(job)">
           <ion-icon name='logo-twitter'></ion-icon>
            Tweet
         </button>
       </ion-col>
   </ion-row>

  </ion-card>

View this on iphone 5 ONLY :

image

Viewing on others: its ok

image

can someone help , thanx