Responsified Board for iPad

acm-ucr · Nov 17, 2024 · 7b9e424 · 7b9e424
1 parent 25173e8
commit 7b9e424
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/board/Board.tsx b/src/components/board/Board.tsx
@@ -17,19 +17,19 @@ const Board = (props: {
         src={props.photo}
         alt="Shadow of photo"
       />
-      <div className="absolute inset-x-0 -bottom-[8px] font-archivo-black text-[12px] md:-bottom-[20px] md:text-[25px] xl:-bottom-[25px] xl:text-[30px] 2xl:-bottom-[32px] 2xl:text-[40px]">
+      <div className="absolute inset-x-0 -bottom-[8px] font-archivo-black text-[12px] md:-bottom-[15px] md:text-[20px] xl:-bottom-[25px] xl:text-[30px] 2xl:-bottom-[32px] 2xl:text-[40px]">
         <p className="relative z-30 flex flex-col items-center text-nowrap">
           {props.name}
         </p>
-        <p className="absolute inset-0 left-[3px] top-[3px] z-20 flex flex-col items-center text-nowrap text-black md:left-[24px] md:top-[10px]">
+        <p className="absolute inset-0 left-[3px] top-[3px] z-20 flex flex-col items-center text-nowrap text-black md:left-[6px] md:top-[5px] xl:left-[24px] xl:top-[10px]">
           {props.name}
         </p>
       </div>
-      <div className="absolute inset-x-0 -bottom-[28px] font-archivo-narrow text-[12px] md:-bottom-[60px] md:text-[25px] xl:-bottom-[75px] xl:text-[30px] 2xl:-bottom-[92px] 2xl:text-[40px]">
+      <div className="absolute inset-x-0 -bottom-[28px] font-archivo-narrow text-[12px] md:-bottom-[50px] md:text-[20px] xl:-bottom-[75px] xl:text-[30px] 2xl:-bottom-[92px] 2xl:text-[40px]">
         <p className="relative z-30 flex flex-col items-center text-nowrap">
           {props.position}
         </p>
-        <p className="absolute inset-0 left-[3px] top-[3px] z-20 flex flex-col items-center text-nowrap text-black md:left-[24px] md:top-[10px]">
+        <p className="absolute inset-0 left-[3px] top-[3px] z-20 flex flex-col items-center text-nowrap text-black md:left-[6px] md:top-[5px] xl:left-[24px] xl:top-[10px]">
           {props.position}
         </p>
       </div>

diff --git a/src/components/board/Boards.tsx b/src/components/board/Boards.tsx
@@ -6,7 +6,7 @@ const Boards = () => {
   return (
     <div className="grid w-3/4 grid-cols-2 gap-x-[15%] gap-y-[6%] pb-[90%] pt-[8%] md:w-5/6 md:grid-cols-3 md:gap-[10%] md:pb-[50%]">
       {Members.map((Member) => (
-        <div className="max-w-[348px]">
+        <div className="max-w-[348px]" key={Member.key}>
           <Board
             key={Member.key}
             photo={Member.image}