Responsive

Author: emilkowalski

components/Grid/Grid.js

@@ -20,9 +20,16 @@ const Grid = ({ children }) => {
 
 const Wrapper = styled("div", {
     display: "grid",
-    gridTemplateColumns: "1fr 1fr 1fr 1fr",
     gap: "$4",
     padding: "$4 0",
+
+    "@bp2": {
+        gridTemplateColumns: "1fr 1fr",
+    },
+
+    "@bp3": {
+        gridTemplateColumns: "1fr 1fr 1fr 1fr",
+    },
 });
 
 export default Grid;

components/Header/Header.js

@@ -21,8 +21,6 @@ const Header = () => {
 };
 
 const Wrapper = styled(Container, {
-    position: "sticky",
-    top: 0,
     height: 100,
     display: "flex",
     alignItems: "center",

stitches.config.js

@@ -30,4 +30,10 @@ export const { styled, getCssString, global, keyframes } = createCss({
             1: "7px",
         },
     },
+    media: {
+        bp1: "(min-width: 575px)",
+        bp2: "(min-width: 750px)",
+        bp3: "(min-width: 1000px)",
+        bp4: "(min-width: 1200px)",
+    },
 });