Error404 page responsive

src/pages/ErrorPages/NotFoundPage.js

@@ -3,6 +3,7 @@ import { Trans, useTranslation } from "react-i18next";
 import {
   Container,
   ErrorContainer,
+  ErrorImageContainer,
   ErrorHeading,
   ErrorMessage,
   Button,
@@ -28,17 +29,16 @@ const NotFoundPage = () => {
   return (
     <Container>
       <ErrorContainer>
-        <Error404 />
+        <ErrorImageContainer>
+          <Error404 />
+        </ErrorImageContainer>
         <ErrorHeading>{t("notFound.error404")}</ErrorHeading>
         <ErrorMessage>
           <Trans i18nKey="notFound.errorMessage" />
         </ErrorMessage>
         <Button
           variant="contained"
-          width="190px"
-          height="49px"
           buttoncolor={selectedTheme.primaryYellow}
-          textcolor="black"
           onClick={showAllOffersHandler}
         >
           {t("notFound.showAllOffers")}

src/pages/ErrorPages/NotFoundPage.styles.js

@@ -2,7 +2,6 @@ import { Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import styled from "styled-components";
 import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
-// import Section from "../../components/Section/Section";
 import selectedTheme from "../../themes";
 
 export const Container = styled(Box)`
@@ -19,14 +18,24 @@ export const ErrorContainer = styled(Box)`
   height: 100vh;
 `;
 
+export const ErrorImageContainer = styled(Box)`
+  @media screen and (max-width: 600px) {
+    width: 196px;
+    svg {
+      width: 196px;
+      height: 90px;
+    }
+  }
+`;
+
 export const ErrorHeading = styled(Typography)`
   font-family: "Open Sans";
   font-size: 72px;
   font-weight: 700;
   color: ${selectedTheme.primaryPurple};
 
-  @media screen and (max-width: 420px) {
-    font-size: 62px;
+  @media screen and (max-width: 600px) {
+    font-size: 36px;
   }
 `;
 
@@ -36,8 +45,20 @@ export const ErrorMessage = styled(Typography)`
   font-weight: 400;
   color: #818181;
   margin-bottom: 45px;
+
+  @media screen and (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 
 export const Button = styled(PrimaryButton)`
+  width: 190px;
+  height: 49px;
   font-weight: 600;
+  color: #000;
+
+  @media screen and (max-width: 600px) {
+    width: 180px;
+    height: 44px;
+  }
 `;