Unable to modify Grid break points in ionic 4

Ionic Framework
1

I need to change the width of the grid col attribute ‘xl’(size-xl) to 1600px. So I try to change that attribute with the following code. Inside the theme/variables.scss I wrote like this

: root{
        --ion-grid-width-xl: 1600px !important;
}

It didn’t change anything. Please suggest me how to modify the default break point value.

1 Like
2

It’s not currently possible to change the breakpoints as CSS variables in media queries are not currently supported. You can read more on this in our known limitations section in the theming documentation: https://ionicframework.com/docs/theming/advanced#variables-in-media-queries

I did notice that the documentation for grid is showing that it is possible, so I’ve created an issue on our ionic-docs repository to get this fixed:

1 Like
3

@brandyshea Thank you very much for your reply.

4

Any new? I have the same issue

1 Like
5

Is this still true? The docs now say that it’s possible :thinking: Responsive Grid System and Column Layout Based on Screen Size