Why this CSS code is not working properly in all devices?

Question

I have attached 2 pictures. The iPhone 6 picture is the correct one which should be displayed in all devices. Every page should display the page as in the 1st image (that of iPhone6). It is getting distorted in iPhone 5 (image attached), android devices and in tablets

HTML Code ( using AngularJS and ionic)

<ion-view >
<ion-nav-title>
    <div class="trip-title">Trips</div>
</ion-nav-title>


<ion-content class="aaaaa">

    <ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">

        <ion-tab title="PAST TRIPS" ui-sref="previous" on-select="onPreviousTabSelected()">
        <ion-nav-view name="previous"></ion-nav-view>
        </ion-tab>

        <ion-tab title="UPCOMING TRIPS" ui-sref="future" on-select="onFutureTabSelected()">
            <ion-nav-view name="future"></ion-nav-view> 
        </ion-tab>

    </ion-tabs> 

    <div class="triprepeat" ng-repeat="item in items| orderBy : '-tripDate'">
       <div class="div-box-trip">
           <img class="cartrip" src="http://www.irantravelservice.com/images/icon/car.png" alt="Custom Image"/>
            <span><div class="date-trip">{{item.starRating}}, {{item.tripDate}}</div></span>
             <span><div class="bookingidtitle-trip">Booking Id : </div></span>
             <span><div class="bookingid-trip">{{item.tripId}}</div></span>
             <span>
             <div class="starttime-trip">{{item.tripStartTime}}</div>
             <div>  
                 <img class="arrowright-trip" src="http://worldconflictsresearch.t83.net/communities/8/004/013/145/338//images/4621747970_179x256.png" alt="Custom Arrow Image"/>
              </div>
              </span>
              <span>
              <div class="source-trip">{{item.sourceLocation}}</div>
              <div>
                 <img class="greencircle-trip" src="http://stavangerkarateklubb.no/wp-content/uploads/2016/05/grønn.png" alt="Custom Red Circle"/></div>
              </span>
              <span><div class="dashed-trip"><hr class="dashtrip"/></div></span>
              <span>
              <div class="dest-trip">{{item.destinationLocation}}</div>
              <div><img class="redcircle-trip" src="http://107.6.178.147/wp360/wordpress/wp-content/uploads/2016/04/red.png" alt="Custom Red Circle"/></div>
              </span>
            </div>

       </div>

</ion-content>

CSS Code

.view-container .scroll-content.ionic-scroll.has-header.aaaaa {     
  background-color: #ffffff;      
}

.cartrip{
  max-width: 40px !important;
  margin-top: 15px;
  margin-left: 20px;  
}

.triprepeat{
  background-color: #f1f1f1; 
  border-bottom: solid 1.5px #B2B2B2;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.date-trip{
  margin-left: 80px;
  margin-right: auto;
  margin-top: -50px;
  font-size: 12px;
  color: #000000;
}

.div-box-trip{
  height: 120px;
  width: auto;
}

.bookingidtitle-trip{
  margin-left: 80px;
  margin-top: 8px;
  font-size: 11px;
  color: #A9A9A9;
}

.bookingid-trip{
  margin-left: 160px;
  margin-right: auto;
  margin-top: -20px;
  font-size: 12px;
  color: #000000;
}

.starttime-trip{
  margin-left: 250px;
  margin-right: auto;
  margin-top: -48px;
  font-size: 12px;    
}

.arrowright-trip{
  height: 15px;
  width: auto;
  position: absolute;
  margin-top: -18px;
  margin-left: 315px;
}

.source-trip{
  margin-left: 80px;
  margin-top: 40px;
  font-size: 12px;
  color: #000000;
}

.dest-trip{
  margin-left: 280px;
  margin-top: -32px;
  font-size: 12px;
  color: #000000;
}

.greencircle-trip{
  height: 15px;
  width: 15px;
  margin-left: 85px;
}

.redcircle-trip{
 height: 15px;
  width: 15px;
 margin-left: 295px;    
}

.dashtrip{
  border-top: dotted 1px;
  width: 170px;
}

.dashed-trip{
  margin-left: 110px;
  margin-top: -10px;
}

I am showing through two pictures how the page is getting distorted for some devices, say for example the code is working perfect for iPhone 6 but getting distorted for say iPhone5. This page should work in all mobile and tablet devices

iPhone 6

iPhone 5

I have to make it work for all devices like iPhone6 where it is working perfect. Since this page is mobile only I have not used @Media query.

Answer 1

Consider using the ionic 2 grid system which is specifically created for developing responsive grid layouts.

In your case you would need something like

<ion-grid>
   <ion-row>
      <ion-col col-2>
          Left Side
      </ion-col>

      <ion-col col-10>
         Right side
      </ion-col>
   </ion-row>
</ion-grid>

For additional margin and padding you can add some of the ionic 2 css utilities instead of writing up your own css .

 <ion-col col-10 margin-right no-padding>