Ionic 3 grid size won't adapt to smaller screen - ionic-framework

Question

I have an Ionic 3 mobile app that I have developed, where I have form fields that I setup in a grid.
There are 3 columns that should appear side-by-side.
In most models it looks fine, but when I view it on an iPhone 5s or even on 6s, the fields do not appear side-by-side.
Instead, the input field drops a line and fills out 100% of the width, with the other columns at the top.
Here is my code:
<ion-grid fixed *ngIf="showPhone">
<ion-row class="edit-field">
<ion-col col-auto class="field-icon">
<ion-icon name="md-remove-circle"></ion-icon>
</ion-col>
<ion-col col-auto class="field-type">
<select name="phoneType" [(ngModel)]="phoneData.phone_type">
<option value="select"> -- Select -- </option>
<option value="home">home</option>
<option value="mobile">mobile</option>
<option value="business">business</option>
<option value="home fax">home fax</option>
<option value="work fax">work fax</option>
<option value="fax">fax</option>
</select>
</ion-col>
<ion-col class="field-input">
<input type="text"
[(ngModel)]="phoneData.phone_number"
(blur)="addPhone(phoneData)"
placeholder="Phone">
</ion-col>
</ion-row>
</ion-grid>
Howe can I make it so that it adapts when viewed on a smaller screen?

Answer 1

You can use media queries for fix it. Depending on the screen size you need to change the width.
ex:
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive */
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
//whatever in CSS.
}
If you Need to affect the CSS code only for IOS, You should check the platform in css.
Any queries please refer the link https://ionicframework.com/docs/theming/platform-specific-styles/