diff --git a/demos/hide-when/main.html b/demos/hide-when/main.html
index 276139286a..bcc127dc9d 100644
--- a/demos/hide-when/main.html
+++ b/demos/hide-when/main.html
@@ -6,12 +6,28 @@
   <h5 margin>Hide Icon Per Platform</h5>
   <p margin>In this example we're using the <code>hideWhen</code> directive to decide whether to hide an icon based on the platform.</p>
 
-  <ion-row text-center>
-    <ion-col>
-      <ion-icon name="logo-android" hideWhen="ios"></ion-icon>
+  <ion-row>
+    <ion-col text-center>
+      <ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
     </ion-col>
     <ion-col>
-      <ion-icon name="logo-apple" hideWhen="android"></ion-icon>
+      <code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col text-center>
+      <ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
+    </ion-col>
+    <ion-col>
+      <code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col text-center>
+      <ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
+    </ion-col>
+    <ion-col>
+      <code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
     </ion-col>
   </ion-row>
 </ion-content>
@@ -20,7 +36,10 @@
   .hide-when-demo ion-col {
     background: #f8f8f8;
     border: 1px solid #ddd;
-    margin: 5px;
+    margin: 1%;
+    max-width: 48%;
+    flex: 0 0 48%;
+    min-height: 120px;
   }
 
   .hide-when-demo code {
@@ -28,6 +47,6 @@
   }
 
   .hide-when-demo ion-icon {
-    font-size: 200px;
+    font-size: 100px;
   }
 </style>
diff --git a/demos/show-when/main.html b/demos/show-when/main.html
index 34de682560..0407f2d803 100644
--- a/demos/show-when/main.html
+++ b/demos/show-when/main.html
@@ -6,12 +6,28 @@
   <h5 margin>Show Icon Per Platform</h5>
   <p margin>In this example we're using the <code>showWhen</code> directive to decide whether to show an icon based on the platform.</p>
 
-  <ion-row text-center>
+  <ion-row>
+    <ion-col text-center>
+      <ion-icon name="logo-apple" showWhen="ios"></ion-icon>
+    </ion-col>
     <ion-col>
+      <code> &lt;ion-icon name="logo-apple" showWhen="ios"&gt;&lt;/ion-icon&gt; </code>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col text-center>
       <ion-icon name="logo-android" showWhen="android"></ion-icon>
     </ion-col>
     <ion-col>
-      <ion-icon name="logo-apple" showWhen="ios"></ion-icon>
+      <code> &lt;ion-icon name="logo-android" showWhen="android"&gt;&lt;/ion-icon&gt; </code>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col text-center>
+      <ion-icon name="logo-windows" showWhen="windows"></ion-icon>
+    </ion-col>
+    <ion-col>
+      <code> &lt;ion-icon name="logo-windows" showWhen="windows"&gt;&lt;/ion-icon&gt; </code>
     </ion-col>
   </ion-row>
 </ion-content>
@@ -20,7 +36,10 @@
   .show-when-demo ion-col {
     background: #f8f8f8;
     border: 1px solid #ddd;
-    margin: 5px;
+    margin: 1%;
+    max-width: 48%;
+    flex: 0 0 48%;
+    min-height: 120px;
   }
 
   .show-when-demo code {
@@ -28,6 +47,6 @@
   }
 
   .show-when-demo ion-icon {
-    font-size: 200px;
+    font-size: 100px;
   }
 </style>