Fixing some responsive details

src/components/Footer.jsx

@@ -12,9 +12,9 @@ import ListItemText from "@mui/material/ListItemText"
 
 import FormFooter from "./FormFooter"
 import { FooterContainer, NavLinkFooter } from "./styled"
-import theme from "./palette"
+import myTheme from "./palette"
 
-const myPalette = theme.palette
+const myPalette = myTheme.palette
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -26,6 +26,14 @@ const useStyles = makeStyles((theme) => ({
   },
   list: {
     color: myPalette.primary.contrastText,
+    [theme.breakpoints.down("md")]: {
+      textAlign: "center",
+    },
+  },
+  listItem: {
+    [theme.breakpoints.down("md")]: {
+      textAlign: "center",
+    },
   },
 }))
 
@@ -36,15 +44,15 @@ function Footer() {
     <FooterContainer bg={myPalette.secondary.dark}>
       <Box>
         <Container>
-          <Grid container spacing={3}>
-            <Grid item sm={12} md={3}>LOGO</Grid>
-            <Grid item sm={12} md={3}>
+          <Grid container spacing={5}>
+            <Grid item xs={12} sm={12} md={3}>LOGO</Grid>
+            <Grid item xs={12} sm={12} md={3}>
               <Typography component="h5" className={classes.title}>
                 Contáctanos
               </Typography>
               <FormFooter />
             </Grid>
-            <Grid item sm={12} md={3}>
+            <Grid item xs={12} sm={12} md={3}>
               <Typography component="h5" className={classes.title}>
                 Sobre nosotros
               </Typography>
@@ -72,7 +80,7 @@ function Footer() {
                 </ListItem>
               </List>
             </Grid>
-            <Grid item sm={12} md={3}>
+            <Grid item xs={12} sm={12} md={3}>
               <Typography component="h5" className={classes.title}>
                 Sitio
               </Typography>
@@ -101,6 +109,7 @@ function Footer() {
               </List>
             </Grid>
           </Grid>
+
           <Typography variant="body2" align="center" color={myPalette.secondary.contrastText} sx={{ py: 2 }}>
             {"Copyright © "}
             <Link color="inherit" href="#">

src/components/palette.js

@@ -16,7 +16,7 @@ const theme = createTheme({
       dark: cyan[700],
       contrastText: "#fff",
     },
-  },
+  }
 })
 
 export default theme

src/components/styled.js

@@ -10,18 +10,21 @@ export const NavLinkFooter = styled.a`
     border-bottom: 2px solid #42C3D8;
     cursor: pointer;
   }
-`
 
-export const NavLink = styled(NavLinkFooter)`
   @media only screen and (max-width: 959px) {
     margin-left: 0px;
-    margin-right: 5px;
     &:hover {
       border-bottom: none;
     }
   }
 `
 
+export const NavLink = styled(NavLinkFooter)`
+  @media only screen and (max-width: 959px) {
+    margin-right: 5px;
+  }
+`
+
 export const FooterContainer = styled.footer`
   width: 100%;
   height: auto;