3 files changed, 34 insertions, 2 deletions
diff --git a/example/index.css b/example/index.css
index 3792232..1544c6d 100644
--- a/example/index.css
+++ b/example/index.css
@@ -24,13 +24,24 @@ button:active {
   border: solid 1px #0081b8;
 }
 
-section {
+body > section {
   position: relative;
   width: 100%;
+  max-width: 62.5em;
+  margin: 0 auto;
+  padding: 0 1.5em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 article {
   position: relative;
   margin: 0 auto;
   float: left;
+}
+
+h1 {
+  border-bottom: solid 1px #b9b8bb;
+  padding-bottom: .5em;
 }
 \ No newline at end of file
diff --git a/example/index.html b/example/index.html
index a08c885..9c7f01a 100644
--- a/example/index.html
+++ b/example/index.html
@@ -20,7 +20,7 @@
 </head>
 <body ng-controller="MainCtrl">
 
-<section>
+<section viewport-width>
   <h1> Popovers </h1>
   <article>
     <button ns-popover
diff --git a/example/index.js b/example/index.js
index 6315168..c742c1e 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,5 +1,6 @@
 angular
   .module('nsPopoverExample', ['nsPopover'])
+
   .controller('MainCtrl', function($scope) {
     $scope.items = [{
       name: "Action"
@@ -8,4 +9,24 @@ angular
     }, {
       name: "Something else here"
     }];
+  })
+
+  .directive('viewportWidth', function() {
+    return {
+      link: function(scope, elm, attrs) {
+        function getViewport() {
+          var e = window, a = 'inner';
+          if (!('innerWidth' in window)) {
+            a = 'client';
+            e = document.documentElement || document.body;
+          }
+          return {
+            width : e[a + 'Width'] ,
+            height : e[a + 'Height']
+          };
+        }
+
+        elm.css('maxWidth', getViewport().width + 'px');
+      }
+    };
   });
 \ No newline at end of file