From 2035fe98698dce35f457dba944208eb0c1604cb3 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Fri, 20 Aug 2021 13:50:42 +0200
Subject: [PATCH] reduce horizontal margins in mobile view

---
 frontend/pages/product/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/product/index.js b/frontend/pages/product/index.js
index e11cc6cb..6281c792 100644
--- a/frontend/pages/product/index.js
+++ b/frontend/pages/product/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useLayoutEffect } from "react";
+import React, { useEffect, useState, useLayoutEffect, useContext } from "react";
 import {
   Heading,
   Text,
@@ -11,6 +11,7 @@ import {
   ListItem,
 } from "@chakra-ui/react";
 import { DEFAULT_METATAGS } from "../../src/components/constants";
+import UIContext from "../../src/core/providers/UIProvider/context";
 
 export async function getStaticProps() {
   return {
@@ -29,6 +30,7 @@ const assets = {
 };
 
 const Product = () => {
+  const ui = useContext(UIContext);
   const [background, setBackground] = useState("background720");
   const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
   const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
@@ -107,7 +109,7 @@ const Product = () => {
     };
   }, []);
 
-  const margin = "22%";
+  const margin = ui.isMobileView ? "7%" : "22%";
 
   return (
     <Flex