fix issue in mobile

hackupc · Sep 2, 2024 · 7c6a5f1 · 7c6a5f1
1 parent e3882b3
commit 7c6a5f1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/app/genericComponents/General.ts b/src/app/genericComponents/General.ts
@@ -24,19 +24,19 @@ import {
   TitleXL,
 } from "@/app/genericComponents/tokens";
 
-export const Background = styled.div`
+export const TransparentBackground = styled.div`
   margin: 0;
   padding: ${SpacingXL} ${SpacingM};
   width: 100%;
   height: 100%;
-  background: ${BackgroundAccent};
+
+  @media (max-width: ${MobileBreakpoint}) {
+    padding: ${SpacingM};
+  }
 `;
 
-export const TransparentBackground = styled.div`
-  margin: 0;
-  padding: ${SpacingXL} ${SpacingM};
-  width: 100%;
-  height: 100%;
+export const Background = styled(TransparentBackground)`
+  background: ${BackgroundAccent};
 `;
 
 export const CardWithBorder = styled.div`
@@ -73,7 +73,7 @@ export const CardBody = styled.p`
 `;
 
 export const CardContainer = styled.div`
-  margin: ${SpacingM};
+  margin: ${SpacingM} 0;
 `;
 
 export const VideoContainer = styled.div`

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,10 +10,19 @@ import Socials from "@components/Socials";
 import Footer from "@components/Footer";
 import PresentationCards from "@components/PresentationCards";
 import styled from "styled-components";
-import { SpacingS } from "@/app/genericComponents/tokens";
+import {
+  MobileBreakpoint,
+  SpacingM,
+  SpacingS,
+} from "@/app/genericComponents/tokens";
 
 const FirstBackground = styled(TransparentBackground)`
   padding-top: ${SpacingS};
+
+  @media (max-width: ${MobileBreakpoint}) {
+    padding-top: ${SpacingS};
+    padding: ${SpacingM};
+  }
 `;
 
 export default function HomePage() {