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="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="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,21 +577,10 @@ 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-wrap {
   .example {
     display: block;
     overflow: hidden;
@@ -609,20 +598,10 @@ body {
     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%;
   }
 }