Angular Material Design - Change flex value with screen size
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)