Merge pull request #1849 from AletheiaFact/Fix-bug-in-footer-responsiveness

Fixing bug in footer responsiveness

Author: thesocialdev

src/components/Footer/AletheiaInfo.tsx

@@ -20,7 +20,7 @@ const AletheiaInfo = () => {
                     fontSize: "23px",
                     color: colors.white,
                     marginBottom: 0,
-                    marginTop: vw?.sm ? "64px" : "0",
+                    marginTop: vw?.xs ? "44px" : "0",
                     textAlign: "center",
                 }}
             >

src/components/Footer/Footer.tsx

@@ -35,7 +35,7 @@ const Footer = () => {
             }}
         >
             <Grid container spacing={3} justifyContent="center">
-                <Grid item lg={4} md={5} sm={12}>
+                <Grid item md={4} sm={6} xs={12}>
                     <AletheiaSocialMediaFooter />
                     <Box
                         sx={{
@@ -79,17 +79,17 @@ const Footer = () => {
                 </Grid>
                 <Grid
                     item
-                    lg={4}
-                    md={5}
-                    sm={12}
+                    md={4}
+                    sm={6}
+                    xs={12}
                     sx={{
                         display: "flex",
                         flexDirection: "column",
                         justifyContent: "space-between",
                     }}
                 >
                     <FooterInfo />
-                    <Box sx={{ mt: vw?.sm ? 8 : 0 }}>
+                    <Box sx={{ mt: vw?.xs ? 8 : 0 }}>
                         <Typography
                             variant="h6"
                             sx={{
@@ -105,7 +105,7 @@ const Footer = () => {
                         </Typography>
                     </Box>
                 </Grid>
-                <Grid item lg={4} md={5} sm={12}>
+                <Grid item md={4} sm={6} xs={12}>
                     <AletheiaInfo />
                 </Grid>
             </Grid>

src/components/Footer/FooterInfo.tsx

@@ -15,7 +15,7 @@ const FooterInfo = () => {
 
     return (
         <Grid container style={{ justifyContent: vw?.sm ? "center" : "start" }}>
-            <span style={{ textAlign: "justify", marginBottom: "16px" }}>
+            <span style={{ fontSize: "14px", textAlign: "justify", marginBottom: "16px" }}>
                 {t("about:alertInfo")}
                 <a
                     style={{
@@ -38,7 +38,7 @@ const FooterInfo = () => {
                     target="_blank"
                     rel="noreferrer"
                 >
-                        {t("about:labelButton")} <DescriptionOutlined fontSize="small"/>
+                    {t("about:labelButton")} <DescriptionOutlined fontSize="small"/>
                 </AletheiaButton>
             ) : null}
         </Grid>