fixing the examples page

docs/assets/css/docs.css

@@ -551,21 +551,10 @@ body {
 }
 
 .docs-examples {
-  margin-top: 50px;
-  margin-bottom: 50px;
-}
-
-.docs-example-group {
   margin-top: 30px;
 }
-.docs-example-group .example-wrap {
-  display: inline-block;
-  margin-right: 10px;
-}
-.docs-example-group .example-wrap:last-child {
-  margin-right: 10px;
-}
-.docs-example-group .example-wrap .example {
+
+.example-wrap .example {
   display: block;
   overflow: hidden;
   padding: 3px;
@@ -573,26 +562,18 @@ body {
   border: 1px solid #dddddd;
   border-radius: 3px;
 }
-.docs-example-group .example-wrap h5 {
+.example-wrap h5 {
   margin-top: 10px;
 }
-.docs-example-group .example-wrap img {
+.example-wrap img {
   display: block;
   width: 100%;
   height: auto;
 }
 
 @media screen and (min-width: 768px) {
-  .docs-example-group .example-wrap {
-    display: inline-block;
-  }
-  .docs-example-group .example-wrap .example {
-    width: 180px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .docs-example-group .example-wrap .example {
-    width: 220px;
+  .example-wrap .example {
+    width: 100%;
   }
 }
 code {

docs/examples.html

@@ -24,25 +24,31 @@ title: Examples · Ratchet
 
       <p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
 
-      <div class="docs-example-group">
-        <div class="example-wrap">
-          <a class="example" href="/examples/app-movies" data-ignore="push">
-            <img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480">
-          </a>
-          <h5>Movie finder</h5>
+      <div class="column-group">
+        <div class="column units-2 lg-units-4">
+          <div class="example-wrap">
+            <a class="example" href="/examples/app-movies" data-ignore="push">
+              <img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480">
+            </a>
+            <h5>Movie finder</h5>
+          </div>
         </div>
-        <div class="example-wrap">
-          <a class="example" href="/examples/app-ios-mail" data-ignore="push">
-            <img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
-          </a>
-          <h5>iOS mail app</h5>
-        </div>
-        <div class="example-wrap">
-          <a class="example" href="/examples/app-android-notes" data-ignore="push">
-            <img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
-          </a>
-          <h5>Android notes app</h5>
+        <div class="column units-2 lg-units-4">
+          <div class="example-wrap">
+            <a class="example" href="/examples/app-ios-mail" data-ignore="push">
+              <img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
+            </a>
+            <h5>iOS mail app</h5>
+          </div>
         </div>
+        <div class="column units-2 lg-units-4">
+          <div class="example-wrap">
+            <a class="example" href="/examples/app-android-notes" data-ignore="push">
+              <img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
+            </a>
+            <h5>Android notes app</h5>
+          </div>
+        </div> <!-- .column-group -->
       </div>
     </div>
 

sass/docs.scss

@@ -577,52 +577,31 @@ body {
 
 // Example devices
 // --------------------------------------------------
-
 .docs-examples {
-  margin-top: 50px;
-  margin-bottom: 50px;
-}
-.docs-example-group {
   margin-top: 30px;
-
-  .example-wrap {
-    display: inline-block;
-    margin-right: 10px;
-
-    &:last-child {
-      margin-right: 10px;
-    }
-    .example {
-      display: block;
-      overflow: hidden;
-      padding: 3px;
-      width: 100%;
-      border: $border-default;
-      border-radius: 3px;
-    }
-    h5 {
-      margin-top: 10px;
-    }
-    img {
-      display: block;
-      width: 100%;
-      height: auto;
-    }
+}
+.example-wrap {
+  .example {
+    display: block;
+    overflow: hidden;
+    padding: 3px;
+    width: 100%;
+    border: $border-default;
+    border-radius: 3px;
+  }
+  h5 {
+    margin-top: 10px;
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: auto;
   }
 }
 @media screen and (min-width: 768px) {
   // Examples
-  .docs-example-group .example-wrap {
-    display: inline-block;
-
-    .example {
-      width: 180px;
-    }
-  }
-}
-@media screen and (min-width: 1200px) {
-  .docs-example-group .example-wrap .example {
-    width: 220px;
+  .example-wrap .example {
+    width: 100%;
   }
 }