Responsive grid doesn't work with xs breakpoint

@ioclaudio wrote:

Hi,
I can’t understand how Ionic Responsive Grid works.
I’ve this grid, with these breakpoints: xs, sm,md,lg,xl.
If I try it with Chrome it works as expexted until the size of the page is 576px when all the columns are in the same row.

The problem is that as soon as the size of the page reaches 575px all the cards go again on the same row, as it was a large screen.
How is it possibile?

<ion-grid>
    <ion-row>
      <ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
        <ion-card>
            ONE
        </ion-card>
      </ion-col>
      <ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
        <ion-card>
          TWO
        </ion-card>
      </ion-col>
      <ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
        <ion-card>
          THREE
        </ion-card>
      </ion-col>
      <ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
        <ion-card>
          FOUR
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

Posts: 1

Participants: 1

Read full topic