Merge pull request #15 from SunnyLi33/main

Mobile View Image Overlap Fixed
langaracpsc · Feb 3, 2024 · aab3d21 · aab3d21
2 parents 30c3350 + 906454f
commit aab3d21
Showing 1 changed file with 23 additions and 25 deletions.
diff --git a/frontend/src/app/HomePage.tsx b/frontend/src/app/HomePage.tsx
@@ -23,9 +23,7 @@ interface HomePageProps
 export default function HomePage({} : HomePageProps) 
 {
     const execProfiles = useAppSelector(selectProfile);
-
     const event = useAppSelector(selectEvent);
-
     const mainDispatch = useAppDispatch();
 
     mainDispatch(SetCurrentPage("/"));
@@ -55,41 +53,41 @@ export default function HomePage({} : HomePageProps)
     });
 
     let css: string = "", flexContainer: string = "flex flex-row max-[600px]:justify-center max-[600px]:mx-0 ml-[10%]";
-
     let size: number = 5;
 
     <div className={"text-3xl"}></div>;
     <div className={"text-2xl"}></div>;
     <div className={"flex-col-reverse"}></div>;
 
-    return (<div className={"flex flex-row max-[600px]:flex-col-reverse bg-body-gray w-full h-full"}>
-        <div className={"grid grid-rows-[15%_60%_20%] max-[600px]:grid-rows-1 w-full h-full gap-3 max-[600px]: gap-1 max-[900px]:basis-1/3"}>
-            <div></div>
+    return (
+        <div className={"flex flex-row max-[600px]:flex-col-reverse bg-body-gray w-full h-full"}>
+            <div className={"grid grid-rows-[15%_60%_20%] max-[600px]:grid-rows-1 w-full h-full gap-3 max-[600px]: gap-1 max-[900px]:basis-1/3"}>
+                <div></div>
 
-            <div className={"flex row-start-2 flex-col row-span-1 text-7xl max-[900px]:text-5xl max-[600px]:text-3xl text-white-900 justify-center"}>
-                <div className={flexContainer}>   
-                    <span className="shrink text-lang-orange">Langara</span> 
-                </div>
-
-                <div className={flexContainer}>
-                    <span className="shrink">Computer</span>
+                <div className={"flex row-start-2 flex-col row-span-1 text-7xl max-[900px]:text-5xl max-[600px]:text-3xl text-white-900 justify-center"}>
+                    <div className={flexContainer}>   
+                        <span className="shrink text-lang-orange">Langara</span> 
+                    </div>
+
+                    <div className={flexContainer}>
+                        <span className="shrink">Computer</span>
+                    </div>
+
+                    <div className = {flexContainer}>
+                        <span className="shrink">Science Club</span>
+                    </div>
                 </div>
 
-                <div className = {flexContainer}>
-                    <span className="shrink">Science Club</span>
+                <div className={"flex flex-row ml-[10%] gap-3 mb-5 max-[600px]:mx-0 max-[600px]:justify-center"}>
+                    <SocialIcons/>
                 </div>
             </div>
-
-            <div className={"flex flex-row ml-[10%] gap-3 mb-5 max-[600px]:mx-0 max-[600px]:justify-center"}>
-                <SocialIcons/>
-            </div>
-        </div>
-        <div className="grid grid-rows-[20%_60%_20%] max-[600px]:grid-rows-1 w-full h-full">
-            <div className={"flex flex-row row-start-2 row-span-1 text-white-900 justify-center max-[600px]:mt-0"}>
-                <img className={"max-[600px]:h-[160%] max-[600px]:w-[100%] shrink-0"} src={"code_snippet.png"}/>
+            <div className="grid grid-rows-[20%_60%_20%] max-[600px]:grid-rows-1 w-full h-full">
+                <div className="flex flex-row row-start-2 row-span-1 justify-center max-[600px]:mt-0">
+                    <img className="max-[600px]:h-auto max-[600px]:w-[100%] shrink-0" src="code_snippet.png"/>
+                </div>
             </div>
         </div>
-    </div>
-    );
+);
 }