Example: Constrain PointerFluid to 960px

ethanselzer · Apr 14, 2017 · 4c18b12 · 4c18b12
1 parent 0605469
commit 4c18b12
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git 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
@@ -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>
         );
     }