From 4c18b12083077225109a73fbb65ad70219416d10 Mon Sep 17 00:00:00 2001
From: Ethan Selzer <ethanselzer@gmail.com>
Date: Fri, 14 Apr 2017 14:56:07 -0700
Subject: [PATCH] Example: Constrain PointerFluid to 960px

---
 example/src/pages/App.css         |  5 ++++
 example/src/pages/PointerFluid.js | 38 ++++++++++++++++---------------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/example/src/pages/App.css b/example/src/pages/App.css
index 8d2ff23d..741d488d 100644
--- a/example/src/pages/App.css
+++ b/example/src/pages/App.css
@@ -2,6 +2,11 @@ body {
   font-family: Arial;
 }
 
+.layout {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
 .pointer {
   width: 300px;
   margin: 20px 0 0 20px;
diff --git a/example/src/pages/PointerFluid.js b/example/src/pages/PointerFluid.js
index 88cfed0a..705491cd 100644
--- a/example/src/pages/PointerFluid.js
+++ b/example/src/pages/PointerFluid.js
@@ -35,25 +35,27 @@ export default class extends Component {
 
     render() {
         return (
-            <div className="pointer-fluid">
-                <div className="pointer-fluid__instructions">
-                    Hover image to magnify
+            <div className="layout">
+                <div className="pointer-fluid">
+                    <div className="pointer-fluid__instructions">
+                        Hover image to magnify
+                    </div>
+                    <ReactImageMagnify {...{
+                        largeImage: {
+                            alt: '',
+                            src: watchImg1200,
+                            width: 1200,
+                            height: 1800
+                        },
+                        smallImage: {
+                            alt: 'Wristwatch by Ted Baker London',
+                            isFluidWidth: true,
+                            src: watchImg1200,
+                            srcSet: this.srcSet,
+                            sizes: '30vw'
+                        }
+                    }} />
                 </div>
-                <ReactImageMagnify {...{
-                    largeImage: {
-                        alt: '',
-                        src: watchImg1200,
-                        width: 1200,
-                        height: 1800
-                    },
-                    smallImage: {
-                        alt: 'Wristwatch by Ted Baker London',
-                        isFluidWidth: true,
-                        src: watchImg1200,
-                        srcSet: this.srcSet,
-                        sizes: '30vw'
-                    }
-                }} />
             </div>
         );
     }