From 4bfd3982be0747970df4c4ee27827dd2c820965b Mon Sep 17 00:00:00 2001
From: Sunny <sli079@mylangara.ca>
Date: Thu, 1 Feb 2024 21:34:45 -0800
Subject: [PATCH] fixed image overlapping text when mobile view

---
 frontend/src/app/HomePage.tsx | 48 +++++++++++++++++------------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/HomePage.tsx b/frontend/src/app/HomePage.tsx
index 96a0ae8..5f30e30 100644
--- 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>
-    );
+);
 }