fix: mobile sponsors button, center cards always

src/app/sponsors/page.tsx

@@ -5,7 +5,7 @@ import Image from 'next/image';
 import astronaut from '../../assets/images/astronaut.svg';
 
 export default function Sponsors() {
-    const sponsorsList: SponsorCardProps[] = [];
+    const sponsorsList: SponsorCardProps[] = Array(30).fill({ name: 'nextjs', logo: '/next.svg' });
 
     // backend logic
     //  sponsorsList =   await(await fetch("backend url",{next:{tags:['collection']}})).json();
@@ -23,10 +23,12 @@ export default function Sponsors() {
                                 <SponsorButton />
                             </div>
                             <div className={styles.sponsorText}>SPONSORS</div>
-                            <div className={styles.sponsorList}>
-                                {sponsorsList.map((e: SponsorCardProps) => (
-                                    <SponsorCard name={e.name} logo={e.logo} key={e.name} />
-                                ))}
+                            <div className={styles.parentList}>
+                                <div className={styles.sponsorList}>
+                                    {sponsorsList.map((e: SponsorCardProps) => (
+                                        <SponsorCard name={e.name} logo={e.logo} key={e.name} />
+                                    ))}
+                                </div>
                             </div>
                         </>
                     ) : (

src/app/sponsors/sponsors.module.css

@@ -91,7 +91,7 @@
   height: min-content;
 
   @media screen and (max-width:560px) {
-    transform: translate(10%, -85%);
+    transform: translate(10%, -05%);
     margin-top: 60px;
   }
 }
@@ -120,6 +120,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
   @media screen and (max-width:560px) {
     transform: translate(10%, -45%);
     margin-top: 60px;
@@ -131,21 +132,39 @@
   display: flex;
   flex-wrap: wrap;
   max-height: 100%;
-  overflow-y: scroll;
+  width: fit-content;
+  height: fit-content;
   overflow-x: hidden;
 
+  gap: 115px;
+  justify-content: center;
+
   @media screen and (max-width:560px) {
     flex-wrap: nowrap;
     flex-direction: column;
     align-items: center;
-    gap:5px;
+    gap: 5px;
   }
 }
 
 .astro {
   overflow: hidden;
   min-width: 220px !important;
+
   @media screen and (max-width:560px) {
     display: none;
   }
+}
+
+.parentList {
+  padding: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-y: scroll;
+
+
+}
+.parentList::-webkit-scrollbar {
+  display: none;
 }

src/components/SponsorCard/SponsorCard.tsx

@@ -9,9 +9,9 @@ import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 
 const SponsorCard = ({ name, logo }: SponsorCardProps) => {
-    const [dim, setDim] = useState(0.75);
+    const [dim, setDim] = useState(1);
     useEffect(() => {
-        setDim(window.innerWidth < 560 ? 0.65 : 0.75);
+        setDim(window.innerWidth < 560 ? 0.65 : 1);
     }, []);
     return (
         <motion.div className={styles.parent} initial={{ scale: dim }}>

src/components/SponsorCard/styles.module.css

@@ -6,8 +6,8 @@
 
 .borderOverlay,
 .sponsorParent {
-    width: 455px;
-    height: 340px;
+    width: 341px;
+    height:255px;
     grid-area: 1/1;
 }
 
@@ -34,8 +34,8 @@
 }
 
 .title {
-    width: 425px;
-    height: 85px;
+    width: 318px;
+    height: 64px;
     flex-shrink: 0;
     transform: translateY(-15%);
     background: rgba(57, 158, 184, 0.5);
@@ -52,8 +52,8 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
-    width: 405px;
-    height: 65px;
+    width: 304px;
+    height: 49px;
     flex-shrink: 0;
     border: 5px solid rgba(255, 255, 255, 0.5);
     display: flex;
@@ -62,13 +62,15 @@
 }
 
 .body {
-    width: 425px;
-    height: 195px;
+    width: 319px;
+    height: 146px;
     flex-shrink: 0;
 
     border: 0.5px solid #fff;
     background: rgba(2, 33, 41, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
+
+    padding: 10px;
 }