Responsiveness in a n-rows x 2-cols grid

@vespinasgmailcom wrote:

I have a grid with two columns, that shows a card on each column for each row. Then the device is in landscape it looks ok:

Screen Shot 2019-07-19 at 5.59.54 PM.png770×343 23.6 KB

But when I rotate the device (to portrait mode) it stacks all rows except for the last one:

The grid system is a simple one with almost no styling but for the last cell:

<ion-grid>
  <ion-row>
    <ion-col><app-custom-card></app-custom-card></ion-col>
    <ion-col><app-custom-card></app-custom-card></ion-col>
  </ion-row>
  <ion-row>
    <ion-col><app-custom-card></app-custom-card></ion-col>
    <ion-col style="margin: auto; text-align: center !important;">
       <ion-icon name="add-circle" color="medium"></ion-icon>	
    </ion-col>
  </ion-row>
</ion-grid>

I am sure this can be fixed with a responsive property (sm, lg, xs) but I can’t figure it out how to make it work right (all columns stacked per row).

TIA

Posts: 2

Participants: 1

Read full topic