Fixed horizontal bar and fixed homepage sizing of animation

src/components/Footer/Footer.tsx

@@ -7,7 +7,7 @@ import Youtube from "../icons/Youtube";
 import Tiktok from "../icons/Tiktok";
 
 const Footer = () => (
-  <div className="absolute block min-h-20 w-dvw items-center justify-center bg-[var(--primary-black)] bg-cover px-4 py-12 text-sm text-black md:text-base lg:inline-flex">
+  <div className="relative box-border block min-h-20 w-full max-w-full items-center justify-center overflow-hidden bg-[var(--primary-black)] bg-cover px-4 py-12 text-sm text-black md:text-base lg:flex lg:flex-wrap">
     <div className="flex items-center justify-center px-4 py-14 lg:px-1 lg:py-0">
       <SocialMedia href="https://www.instagram.com/techstartucalgary/">
         <Instagram gradient />

src/components/Merch/MerchItems.tsx

@@ -14,7 +14,7 @@ export const MerchItems = ({
 }) => {
   return (
     <Link className="group w-full max-w-xs cursor-pointer" href={link}>
-      <div className="relative mx-auto mt-5 h-auto max-w-sm rounded-lg border-4 border-black p-5 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-105 group-hover:opacity-90">
+      <div className="relative mx-auto mt-5 box-border h-auto max-w-sm rounded-lg border-4 border-black p-5 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-105 group-hover:opacity-90">
         <div className="relative w-full overflow-hidden rounded-t-lg border-b-4 border-black">
           <Image
             alt="Merch Image"

src/components/Merch/MerchPageContent.tsx

@@ -32,9 +32,12 @@ const MerchPageContent = () => {
       </div>
 
       {/* Merch Items Grid - Max 3 per row */}
-      <div className="my-6 flex w-full flex-wrap justify-center gap-6 px-4">
+      <div className="my-6 box-border flex w-full flex-wrap justify-center gap-6 px-4">
         {MerchItemsData.map((merchItem) => (
-          <div className="w-full p-2 sm:w-1/2 lg:w-1/3" key={merchItem.id}>
+          <div
+            className="box-border w-full p-2 sm:w-1/2 lg:w-1/3"
+            key={merchItem.id}
+          >
             <MerchItems
               clothingImg={merchItem.clothingImg}
               link={merchItem.link}

src/components/Particles.tsx

@@ -26,6 +26,7 @@ const Particle = () => {
       init={particlesInit}
       loaded={particlesLoaded}
       options={{
+        fullScreen: { enable: false },
         interactivity: {
           detect_on: "canvas",
           events: {
@@ -135,6 +136,7 @@ const Particle = () => {
         },
         retina_detect: false,
       }}
+      style={{ height: "100%", width: "100%" }}
     />
   );
 };

src/pageLayouts/HomePage.tsx

@@ -16,7 +16,7 @@ const HomePage = () => {
   return (
     <div className="m-0 box-border overflow-hidden border-none leading-normal">
       <header
-        className="relative flex h-[60vw] flex-col text-center md:h-[70vw]"
+        className="relative flex min-h-[35vh] flex-col items-center justify-center text-center md:min-h-[115vh] md:items-center md:justify-start md:pt-8"
         id="homePageTop"
         style={{
           backgroundImage:
@@ -27,15 +27,15 @@ const HomePage = () => {
         <div className="pointer-events-none relative z-[3]">
           <motion.img
             animate={{ opacity: 1 }}
-            className="mx-auto mt-[50px] w-[85%] max-w-[800px]"
+            className="mx-auto w-[85%] max-w-[800px] md:w-[90%] md:max-w-[900px]"
             initial={{ opacity: 0 }}
             src={tsu_logo.src}
             transition={{ duration: 0.5 }}
           ></motion.img>
         </div>
         <motion.p
           animate={{ opacity: 1 }}
-          className="pointer-events-none z-[3] mb-[100%] mt-0 text-[5vw] font-bold leading-[1.1] text-white"
+          className="pointer-events-none z-[3] mb-8 mt-4 text-[5vw] font-bold leading-[1.1] text-white md:mb-10"
           initial={{ opacity: 0 }}
           transition={{ delay: 1 }}
         >