In the browser column of the mobile browser, the question of material design (css)

Question

I have an Angular MD template that uses row layout on large screens and column layout on mobile devices. However, in most standard browsers on mobile phones, I get a strange result when the columns are too large. I have different screens of how it should look.

View PC

Mobile viewing of what it looks like in Chrome / ff / Opera

Mobile standard browser viewing (problem)

My simplified code (of 3 rows / columns) is as follows

<div layout="row" layout-align="center center"> <div flex="50" flex-sm="90" flex-md="80" class="row3" layout="row" layout-sm="column"> <div flex="40" flex-sm="100" layout="row" layout-align "center start"> <!-- first column --> </div> <div flex="20" flex-sm="100" style="background: #2AFF00"> <!-- second column --> </div> <div flex="40" flex-sm="100" layout="row" layout-align="center start"> <!-- Third column --> </div> </div> </div> 

Answer 1

I did a demo on codepen.io with Chrome, but it seems like Safari 5.1.7 (windows), as BotanMan said, that flexbox is not supported, and I could not even test it on codepen with IE11.

 <div layout-sm="column" layout="row" layout-align="center center" layout-padding> <div class="row3" layout="row" layout-sm="column"> <div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin> <div class="img"></div> <h2>Enter the product serial number</h2> <button class="md-button">Verify the product</button> </div> <div flex-sm="100" flex="20" layout-margin layout-padding style="background: #2AFF00"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum temporibus iure voluptas recusandae molestiae saepe doloremque velit, consequatur minus sint expedita laboriosam magni architecto omnis, reprehenderit labore maxime ea, fugiat officiis. Commodi, aliquam nisi consequatur!</p> <p>Enim aliquam nihil nam alias consequuntur amet fuga suscipit dolores deleniti ut, quo numquam quaerat harum cupiditate dolore veritatis a sit, nesciunt aut magni commodi sed doloremque quis. Voluptatum cupiditate commodi, magni consequatur, eveniet aut.</p> <p>Sit quae natus quibusdam nesciunt quo rem totam sequi dolorem sint eum perspiciatis molestias illum debitis, nobis eos dolorum. Sunt, perspiciatis voluptas possimus, laboriosam officiis recusandae animi in, nisi suscipit ipsum eaque assumenda odit laudantium!</p> </div> <div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin> <div class="img"></div> <h2>Click the button below to enable your webcam and start the scanning</h2> <button class="md-button">Scan W/ webcam</button> </div> </div> </div> 

According to caniuse.com , every latest browser version should be able to use flexbox. * See Link for more compatibility information.

* By the way, in the second directive "layout-align" you are missing "=".