Merge pull request #76 from ft-interactive/fix-71

Adds media query to addition screens. Fixes #71.
ft-interactive · Oct 5, 2017 · 85fa5d2 · 85fa5d2
2 parents 03eb18b + 46e68fb
commit 85fa5d2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/client/components/Ending/panels/AdditionPanel.js b/client/components/Ending/panels/AdditionPanel.js
@@ -110,12 +110,12 @@ export default class AdditionPanel extends Component<Props, State> {
           .addition {
             text-align: left;
             min-width: 260px;
-            margin-bottom: 40px;
+            margin-bottom: 10px;
           }
 
           .main-figure {
             font: 600 84px MetricWeb, sans-serif !important;
-            margin: 20px 0;
+            margin: 20px 0 0;
             letter-spacing: 0.05em;
           }
 
@@ -125,7 +125,21 @@ export default class AdditionPanel extends Component<Props, State> {
             height: 5px;
             width: 60px;
             background: ${highlightColour};
-            margin: 40px 0 30px;
+            margin: 20px 0 30px;
+          }
+
+          @media (min-width: 740px) {
+            .addition {
+              margin-bottom: 40px;
+            }
+
+            .main-figure {
+              margin: 20px 0;
+            }
+
+            .main-figure:after {
+              margin: 40px 0 30px;
+            }
           }
 
           .constituent-figure {

diff --git a/client/components/Ending/panels/Panel.js b/client/components/Ending/panels/Panel.js
@@ -75,7 +75,16 @@ export default class Panel extends Component<Props> {
 
           .spacer {
             flex: 1;
-            min-height: 20px;
+            height: 0;
+            min-height: 0;
+          }
+
+          @media (min-width: 740px) {
+            .spacer {
+              flex: 1;
+              min-height: 20px;
+              height: auto;
+            }
           }
 
           .inner {