Merge pull request #11 from Firgrep/main

fixing responsiveness for team member cards
systemphil · Dec 6, 2023 · cc8e84b · cc8e84b
2 parents 62a8ebc + 8101807
commit cc8e84b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/components/CardTeamMember.tsx b/src/components/CardTeamMember.tsx
@@ -9,7 +9,7 @@ type CardTeamMemberProps = {
 
 const CardTeamMember = ({ name, title, image, children }: CardTeamMemberProps) => {
     return (
-        <div className="flex flex-col w-[450px] h-[600px] rounded-md shadow-lg bg-gradient-to-b from-gray-100 to-gray-300 dark:from-neutral-950/90 dark:to-neutral-800/90 dark:outline-1 dark:outline-solid dark:outline-dark-green-hsl outline outline-1 outline-gray-300">
+        <div className="flex flex-col w-72 md:w-[450px] min-h-[600px] rounded-md shadow-lg bg-gradient-to-b from-gray-100 to-gray-300 dark:from-neutral-950/90 dark:to-neutral-800/90 dark:outline-1 dark:outline-solid dark:outline-dark-green-hsl outline outline-1 outline-gray-300">
             <div className="flex p-8">
                 <Image 
                     height={125} 
@@ -24,7 +24,7 @@ const CardTeamMember = ({ name, title, image, children }: CardTeamMemberProps) =
                         border: "2px solid white"
                     }}
                 />
-                <div className="flex flex-col justify-center align-center ml-10 -translate-y-4 gap-2">
+                <div className="flex flex-col justify-center align-center ml-4 md:ml-10 -translate-y-4 gap-2">
                     <h3 className="text-3xl font-semibold">{name}</h3>
                     <p className="text-lg font-sans text-gray-400">{title}</p>
                 </div>

diff --git a/src/components/pages/team/index.tsx b/src/components/pages/team/index.tsx
@@ -6,7 +6,7 @@ const TeamPage = () => {
     return(
         <div className="flex flex-col container justify-center w-full items-center">
             <h1 className="text-4xl font-bold my-16">Meet Our Team</h1>
-            <div className="flex gap-16 flex-wrap mb-60">
+            <div className="flex justify-center gap-16 flex-wrap mb-60">
                 <CardTeamMember 
                     name="Filip Niklas" 
                     title="Tech Lead"