Example: Position Touch Fluid Instructions Right

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

Hide file tree

Showing 2 changed files with 46 additions and 19 deletions.
diff --git a/example/src/pages/App.css b/example/src/pages/App.css
@@ -24,12 +24,35 @@ body {
 }
 
 .touch-fluid {
+  display: flex;
+  flex-direction: column;
+}
+
+.touch-fluid__image-container {
+  flex: 0 0 100%;
+  width: 80%;
+  margin: 20px auto;
+}
+
+.touch-fluid__instructions {
+  flex: 0 0 100%;
   width: 80%;
   margin: 0 auto;
 }
 
 @media (min-width: 480px) {
   .touch-fluid {
-    width: 30%;
+    flex-direction: row;
+  }
+
+  .touch-fluid__image-container{
+    flex: 0 0 30%;
+    width: auto;
+  }
+
+  .touch-fluid__instructions {
+    flex: 0 0 50%;
+    width: auto;
+    padding-top: 20px;
   }
 }
diff --git a/example/src/pages/TouchFluid.js b/example/src/pages/TouchFluid.js
@@ -35,24 +35,28 @@ class App extends Component {
 
     render() {
         return (
-            <div className="touch-fluid">            
-                <ReactImageMagnifyTouch {...{
-                    largeImage: {
-                        alt: '',
-                        src: watchImg1200,
-                        width: 1200,
-                        height: 1800
-                    },
-                    smallImage: {
-                        isFluidWidth: true,
-                        alt: 'Wristwatch by Ted Baker London',
-                        src: watchImg1200,
-                        srcSet: this.srcSet,
-                        sizes: '(min-width: 480px) 30vw, 80vw'
-                    }
-                }} />
-                <p className="App-intro">Press (long touch) image to magnify. Pan (drag) to traverse image.</p>
-                <p className="App-intro">Note the page can be scrolled when touch begins on image.</p>
+            <div className="touch-fluid">
+                <div className="touch-fluid__image-container">
+                    <ReactImageMagnifyTouch {...{
+                        largeImage: {
+                            alt: '',
+                            src: watchImg1200,
+                            width: 1200,
+                            height: 1800
+                        },
+                        smallImage: {
+                            isFluidWidth: true,
+                            alt: 'Wristwatch by Ted Baker London',
+                            src: watchImg1200,
+                            srcSet: this.srcSet,
+                            sizes: '(min-width: 480px) 30vw, 80vw'
+                        }
+                    }} />
+                </div>
+                <div className="touch-fluid__instructions">
+                    <p className="App-intro">Press (long touch) image to magnify. Pan (drag) to traverse image.</p>
+                    <p className="App-intro">Note the page can be scrolled when touch begins on image.</p>
+                </div>
                 <div style={{height: '1000px'}} />
             </div>
         );