messed around with css enough to eventually make card responsive and specify max height/width

Author: QuadAces

frontend/src/components/Sponsors/sponsorModal.tsx

@@ -15,14 +15,14 @@ export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; s
         props.setFalse();
       }}
     >
-      <div className="bg-[#3977f8] mx-[10vw] py-10 rounded-xl overflow-auto flex flex-col items-center justify-center w-[800px]">
-        <a className="m-10" href={props.sponsorInfo.href}>
-          <img src={`./${props.sponsorInfo.svg}`} alt={props.sponsorInfo.alt} />
+      <div className="bg-[#3977f8] relative w-[800px] h-[550px] m-10 rounded-xl flex flex-col items-center justify-center">
+        <a className="m-10 w-4/5 flex flex-col items-center justify-center" href={props.sponsorInfo.href}>
+          <img className='w-4/5 max-w-[500px] max-h-[200px]' src={`./${props.sponsorInfo.svg}`} alt={props.sponsorInfo.alt} />
         </a>
         <h3 className="mx-10 py-10">{props.sponsorInfo.description}</h3>
         <button
           onClick={props.setFalse}
-          className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[70%] xl:h-12 h-10"
+          className="bg-white border absolute bottom-10 text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[70%] xl:h-12 h-10"
         >
           close
         </button>