add responsive design

Provable-Games · Aug 31, 2024 · e9eecd1 · e9eecd1
1 parent 1db0471
commit e9eecd1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/AdventurerCard.tsx b/src/components/AdventurerCard.tsx
@@ -125,7 +125,7 @@ const AdventurerCard = ({ meta, adventurerId }: AdventurerCardProps) => {
 
   return (
     <div
-      className={`relative flex flex-col bg-black border border-terminal-green border-5`}
+      className={`relative flex flex-col bg-black border border-terminal-green border-5 sm:w-[200px] 2xl:w-[275px] 3xl:w-[350px]`}
     >
       {(Object.values(revealedStats).every((stat) => stat === "?") ||
         isRevealing) && (
@@ -161,14 +161,19 @@ const AdventurerCard = ({ meta, adventurerId }: AdventurerCardProps) => {
                     parseInt(revealedStats[stat as keyof typeof revealedStats]),
                     isRevealing
                   )
-            } w-12 flex flex-col text-center`}
+            } w-full flex flex-col text-center`}
           >
             <p>{stat.toUpperCase()}</p>
             <p>{revealedStats[stat as keyof typeof revealedStats]}</p>
           </span>
         ))}
       </div>
-      <img key={meta.name} src={meta.image} alt={meta.name} className="w-72" />
+      <img
+        key={meta.name}
+        src={meta.image}
+        alt={meta.name}
+        className="w-full"
+      />
     </div>
   );
 };

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -37,6 +37,9 @@ export default {
           '100%': { transform: 'translateX(-200%) translateY(-50%) scale(0.8)', opacity: '0' },
         },
       },
+      screens: {
+        '3xl': '2000px',
+      },
     },
   },
   plugins: [],