How to add size-sm=“” sizing to ion-row in Ionic app?

Ionic Framework Ionic Angular
1

I am trying to update the size of the below ion-row depending on the screen my Ionic app is being used on.

Here is my current code, I want to change the size of this ion-row depending on user’s screen size:

<ion-row class="rowStyle">
    <ion-icon name="mail" class="iconStyle"></ion-icon>
    <ion-input type="email"></ion-input>
</ion-row>

.rowStyle {
    background-color: white;
    padding-left: 10px;
    border-radius: 30px;
    margin-top: 10px;

    ion-icon {
        margin-top: 13px;
        margin-right: 10px;
    }
}

.iconStyle {
    color: var(--ion-color-primary);
}

I am able to change the size of an ion-col with the below code, but applying only this to the ion-row above doesn’t work:

<ion-grid>
    <ion-row>
        <ion-col size="12" size-sm="8" offset-sm="2"">Some text</ion-col>
    </ion-row>
</ion-grid>

To try get around this, I added ion-cols around the ion-icon & the ion-input, but that messes up my styling.

Can someone please tell me how I can apply this sizing to just the ion-row above?