example page

docs/assets/css/docs.css

@@ -388,11 +388,11 @@ body {
   margin-right: 10px;
 }
 .docs-example-group .example-wrap .example {
-  display: inline-block;
+  display: block;
+  padding: 4px;
   overflow: hidden;
   padding: 3px;
-  width: 170px;
-  height: 100px;
+  width: 100%;
   border: 1px solid #dddddd;
   border-radius: 3px;
 }
@@ -401,6 +401,7 @@ body {
   font-weight: 300;
 }
 .docs-example-group .example-wrap img {
+  display: block;
   width: 100%;
 }
 
@@ -911,7 +912,6 @@ hr {
   }
   .docs-example-group .example-wrap .example {
     width: 180px;
-    height: 120px;
   }
 }
 @media screen and (min-width: 1200px) {
@@ -929,7 +929,6 @@ hr {
 
   .docs-example-group .example-wrap .example {
     width: 220px;
-    height: 150px;
   }
 }
 .container {

docs/examples.html

@@ -16,7 +16,6 @@ title: Examples · Ratchet
     </div>
     {% include ad.html %}
   </div>
-  {% include toolbar.html %}
 </div>
 
 <div class="container">
@@ -53,7 +52,7 @@ title: Examples &middot; Ratchet
       </div>
     </div>
   </div>
-  
+
   <div class="column units-2">
     <!-- Footer -->
     {% include footer.html %}

sass/docs.scss

@@ -387,11 +387,11 @@ body {
       margin-right: 10px;
     }
     .example {
-      display: inline-block;
+      display: block;
+      padding: 4px;
       overflow: hidden;
       padding: 3px;
-      width: 170px;
-      height: 100px;
+      width: 100%;
       border: $border-default;
       border-radius: 3px;
     }
@@ -400,6 +400,7 @@ body {
       font-weight: 300;
     }
     img {
+      display: block;
       width: 100%;
     }
   }
@@ -919,7 +920,6 @@ hr {
 
     .example {
       width: 180px;
-      height: 120px;
     }
   }
 }
@@ -938,7 +938,6 @@ hr {
   // Examples
   .docs-example-group .example-wrap .example {
     width: 220px;
-    height: 150px;
   }
 }