From 3c70751d8228974d55a72d99d5a691ea73b8f101 Mon Sep 17 00:00:00 2001 From: Livio Date: Sat, 27 Mar 2021 21:57:30 +0100 Subject: [PATCH] make outrun grid responsive --- src/components/outrun-grid.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/outrun-grid.js b/src/components/outrun-grid.js index 0564ed8f..5a2bb5ab 100644 --- a/src/components/outrun-grid.js +++ b/src/components/outrun-grid.js @@ -1,5 +1,6 @@ import React from "react" import styled from "styled-components" +import breakpoint from "styled-components-breakpoint" const OutrunGridPerspective = styled.div` perspective: 1000px; @@ -38,7 +39,10 @@ const Vert = styled.div` height: 100%; width: 2px; background-color: ${(props) => props.theme.accent}; - margin-left: 4.5%; + margin-left: 12%; + ${breakpoint("md")` + margin-left: 4.5%; + `} box-shadow: 0 2px 21px ${(props) => props.theme.accent}; ` @@ -54,7 +58,10 @@ const Hor = styled.div` display: inline-block; width: 100%; height: 3px; - margin-top: 4.8%; + margin-top: 19%; + ${breakpoint("md")` + margin-top: 4.8%; + `} background-color: ${(props) => props.theme.accent}; box-shadow: 2px 0 21px ${(props) => props.theme.accent}; `