fix(examples): make card examples mobile friendly

- use layout flex attributes to wrap to single-column in small viewports.
justindujardin · Jan 1, 2016 · 77bf5c4 · 77bf5c4
1 parent 22c4521
commit 77bf5c4
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/examples/components/card/action_buttons.html b/examples/components/card/action_buttons.html
@@ -1,5 +1,5 @@
 <md-content class="md-padding" layout="row" layout-wrap layout-align="center start">
-  <div flex="50" layout="column">
+  <div flex="50" layout="column" flex-xs="100">
     <md-card>
 
       <img src="public/images/grass.jpg" class="md-card-image" alt="Grass">
@@ -46,7 +46,7 @@
       </md-card-actions>
     </md-card>
   </div>
-  <div flex="50" layout="column">
+  <div flex="50" layout="column" flex-xs="100">
     <md-card>
       <img src="public/images/lights.jpg" class="md-card-image" alt="Lights">
       <md-card-title>

diff --git a/examples/components/card/basic_usage.html b/examples/components/card/basic_usage.html
@@ -1,5 +1,5 @@
 <md-content class="md-padding" layout="row" layout-wrap layout-align="center start">
-  <div flex="50" layout="column">
+  <div flex="50" flex-xs="100" layout="column">
     <md-card>
       <md-card-title>
         <md-card-title-text>
@@ -38,7 +38,7 @@
       </md-card-content>
     </md-card>
   </div>
-  <div flex="50" layout="column">
+  <div flex="50" flex-xs="100" layout="column">
     <md-card>
       <md-card-title>
         <md-card-title-text>

diff --git a/examples/components/card/inline_actions.html b/examples/components/card/inline_actions.html
@@ -1,6 +1,6 @@
 <div>
   <md-content class="md-padding" layout="row" layout-wrap layout-align="center start">
-    <div flex="50" layout="column">
+    <div flex="50" flex-xs="100" layout="column">
       <md-card>
         <img src="public/images/lights.jpg" class="md-card-image" alt="Lights">
         <md-card-title>
@@ -61,7 +61,7 @@
         </md-card-content>
       </md-card>
     </div>
-    <div flex="50" layout="column">
+    <div flex="50" flex-xs="100" layout="column">
       <md-card>
         <md-card-header>
           <md-card-avatar>