Angular Material Design - Change flex value with screen size

Question

I\'m new to AngularJS so please bear with me. I\'m using Angular Material Design and I have difficulties in identifying a way to efficiently do responsive grids.

Please

Answer 1

Check out the "Responsive Flex & Offset Attributes" section here: https://material.angularjs.org/#/layout/options

Basically, you can use these options:

• flex - Sets flex on all.
• flex-sm - Sets flex on devices less than 600px wide.
• flex-gt-sm - Sets flex on devices greater than 600px wide.
• flex-md - Sets flex on devices between 600px and 960px wide.
• flex-gt-md - Sets flex on devices greater than 960px wide.
• flex-lg - Sets flex on devices between 960px and 1200px.
• flex-gt-lg - Sets flex on devices greater than 1200px wide.

So change your:

<div layout="column" flex="66">

to

<div layout="column" flex-gt-sm="66">

And that div will only use the 66 width when greater than small (mobile)