NEW CSS

front/src/pages/Home/Home.tsx

@@ -1,5 +1,5 @@
 
-import { Snackbar, Stack } from '@mui/material';
+import { Snackbar, Stack, useMediaQuery, useTheme } from '@mui/material';
 
 import MainContainer from '../../components/Container/MainContainer';
 
@@ -8,6 +8,8 @@ import { Box, Card, CardContent, Divider, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { useState } from 'react';
 
+
+
 const Home = () => {
     const navigate = useNavigate()
     const [open, setOpen] = useState(false);
@@ -62,14 +64,17 @@ const Home = () => {
             </Box>
           </Card>
         </Stack>
+        <Box sx={{borderRadius:"200px"}}>
+
         <Snackbar
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
           open={open}
           onClose={handleClose}
+          autoHideDuration={35000}
           message="This feature is not yet available :("
-          sx={{borderRadius:"200px"}}
           style={{borderRadius:"200px"}}
-        />
+          />
+          </Box>
         </Box>
         </MainContainer>
         </>
@@ -80,6 +85,11 @@ export default Home;
 
 
 export function ExplainText(props: any) {
+
+  const theme = useTheme();
+  const isSmUp = useMediaQuery(theme.breakpoints.up('md'));
+  const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));
+
   return (
     <div
       style={{
@@ -90,7 +100,7 @@ export function ExplainText(props: any) {
     >
       <Box
         sx={{
-          width: "50vw",
+          width: !isSxUp ? "100%" : "50vw",
           borderRadius: "20px",
           bgcolor: "background.default",
           padding: "35px"