Fix responsive

src/components/ui/PageGridTemplate/PageGridTemplate.tsx

@@ -75,7 +75,7 @@ const PageGridTemplate: React.FC<IPageGridTemplate> = ({
       <Container>
         <Grid container spacing={4} marginY={2}>
           {shuffle(data).map((product) => (
-            <Grid key={product.id} item xs={3}>
+            <Grid key={product.id} item xs={6} md={3}>
               {getProductCardElement({
                 productCardType,
                 product,

src/pages/cart.tsx

@@ -6,6 +6,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  useMediaQuery,
 } from "@mui/material";
 import { useAtom } from "jotai";
 import { shuffle } from "lodash-es";
@@ -19,13 +20,16 @@ import HelpCardsGroup from "src/components/ui/Cards/HelpCard/HelpCard";
 import { useSimulator } from "src/simulators";
 import { SIMULATE_EFFECT } from "src/simulators/types";
 import { cartAtom } from "src/store/cart";
+import theme from "src/theming/theme";
 import { Product } from "src/types/product";
 
 import { StaticProps } from "./_app";
 
 const CartPage: NextPage = () => {
   useSimulator([SIMULATE_EFFECT.SCRAMBLE_LETTER]);
 
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const { t } = useTranslation([
     "common",
     "flour",
@@ -72,7 +76,7 @@ const CartPage: NextPage = () => {
 
         <Table
           sx={{
-            width: "600px",
+            width: isMobile ? "100%" : "600px",
             marginBottom: "30px",
           }}
         >

src/pages/index.tsx

@@ -1,4 +1,10 @@
-import { Stack, Container, Typography, Box } from "@mui/material";
+import {
+  Stack,
+  Container,
+  Typography,
+  Box,
+  useMediaQuery,
+} from "@mui/material";
 import { useAtom } from "jotai";
 import type { NextPage } from "next";
 import Image from "next/image";
@@ -10,6 +16,7 @@ import AppLink from "src/components/ui/Buttons/AppLink";
 import ObjectiveCard from "src/components/ui/Cards/ObjectiveCard/ObjectiveCard";
 import PageTextTemplate from "src/components/ui/PageTextTemplate/PageTextTemplate";
 import { cartAtom } from "src/store/cart";
+import theme from "src/theming/theme";
 
 import { StaticProps } from "./_app";
 
@@ -22,6 +29,7 @@ const Home: NextPage = () => {
   }, [setCart]);
 
   const emphasisStyle = { color: "primary.main", fontWeight: "bold" };
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const presentationText = (
     <Typography>
@@ -53,9 +61,11 @@ const Home: NextPage = () => {
       <Typography variant="h1" fontSize={40} color="primary.main">
         A11Y INYERFACE
       </Typography>
-      <Container sx={{ width: "800px" }}>{presentationText}</Container>
+      <Container sx={{ width: isMobile ? "100%" : "800px" }}>
+        {presentationText}
+      </Container>
       <Stack spacing="2em" textAlign="center" justifyContent="center">
-        <Stack direction="row" justifyContent="center" spacing="5em">
+        <Stack direction="row" justifyContent="center">
           <Image
             src={require("/public/images/apple-pie.jpeg")}
             alt=""