updated background styles

forbole · Nov 17, 2023 · c0baf91 · c0baf91
1 parent 7a7a1aa
commit c0baf91
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -94,7 +94,7 @@ const Layout = ({
       backgroundPosition: redBg ? "15vw -1vw, 0 0" : "0 0",
       backgroundColor: color.primary,
       backgroundSize: redBg ? "70% 55vw, 105vw" : "100vw 100vw",
-      [theme.breakpoints.between("mobile", 550)]: {
+      [theme.breakpoints.down(550)]: {
         backgroundImage: redBg
           ? "url(/images/assets/bg_mobile_horse.webp), url(/images/assets/bg_mobile_red_background.webp)"
           : "url(/images/assets/bg_mobile_red_background.webp)",

diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
@@ -95,6 +95,15 @@ const Home: FC<Props> = ({ pages }) => {
                   mb: "25px",
                   px: "10%",
                 },
+                [theme.breakpoints.down(550)]: {
+                  fontSize: "32px",
+                  px: "10%",
+                },
+                [theme.breakpoints.down("mobile")]: {
+                  fontSize: "32px",
+                  mt: "95%",
+                  px: "10%",
+                },
               }}
             >
               {t("coBuildingInterchain")}
@@ -121,6 +130,14 @@ const Home: FC<Props> = ({ pages }) => {
                 fontSize: "40px",
                 m: "200px 0 60px 0",
               },
+              [theme.breakpoints.down(550)]: {
+                fontSize: "24px",
+                m: "20% 0 60px 0",
+              },
+              [theme.breakpoints.down("mobile")]: {
+                fontSize: "24px",
+                m: "50% 0 60px 0",
+              },
             }}
           >
             {t("title")}