css - Angular material design behaves weird on certain mobile browsers -


i have following angular-md code. want divs flex in row on desktops , in column view on mobile devices. works on mobile browsers (standard browser , safari 1 tested) columns height way big , doesn't adjust content. seems 3 gettng big biggest div holds content if have fewer content.

<section class="md-whiteframe-z0 sect" flex="50" flex-sm="90" flex-md="80">     <md-toolbar class="tool2" layout-padding>         <div class="md-toolbar-tools">           <h4>             <!-- toolbar text -->           </h4>         </div>     </md-toolbar>  <md-content class="md-default-theme" layout-padding layout="row" layout-sm="column" layout-wrap>     <div flex="40" flex-sm="100" layout-align="center start" layout="row">             <!-- should next eachother on desktop , under eachother on mobile -->     <div flex="20" flex-sm="100" layout-align="start center" layout-align-sm="center center" layout="column">         <!-- should next eachother on desktop , under eachother on mobile -->     </div>     <div flex="40" flex-sm="100" layout-align="center start" layout="row">         <!-- should next eachother on desktop , under eachother on mobile -->     </div> </md-content> 


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -