adjusted width

CodeForPhilly · Feb 24, 2024 · 1fffb89 · 1fffb89
1 parent 72cbf83
commit 1fffb89
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/frontend/src/pages/Help/Help.tsx b/frontend/src/pages/Help/Help.tsx
@@ -46,7 +46,7 @@ function Help() {
 
   return (
     <Layout>
-      <div className="mt-20 flex w-full max-w-6xl flex-col items-center justify-center px-4">
+      <div className="mt-20 flex w-full flex-col items-center justify-center px-4">
         <div className="flex justify-center text-center">
           <h2 className="mt-20 font-satoshi text-3xl text-blue-600">
             Help & Support Page
@@ -59,14 +59,13 @@ function Help() {
         </div>
         <div className="flex flex-col gap-4 sm:flex-row">
           {data.icon.map((icon, index) => (
-            <Link to={data.link[index]} key={index} className="flex"> 
-
-            <HelpCard
-              key={index}
-              icon={icon}
-              title={data.title[index]}
-              paragraph={data.paragraph[index]}
-            />
+            <Link to={data.link[index]} key={index} className="flex flex-grow basis-1/3 max-w-full">
+              <HelpCard
+                key={index}
+                icon={icon}
+                title={data.title[index]}
+                paragraph={data.paragraph[index]}
+              />
             </Link>
           ))}
         </div>

diff --git a/frontend/src/pages/Help/HelpCard.tsx b/frontend/src/pages/Help/HelpCard.tsx
@@ -40,7 +40,7 @@ function HelpCard(data: HelpProps) {
   [data.icon, data.title, data.paragraph]); 
 
   return (
-    <div className="flex h-72 w-full max-w-6xl min-w-[280px] flex-col items-center justify-center rounded-xl border-2 border-blue-100 bg-neutral-50 px-4 shadow-md md:mt-28">
+    <div className="flex h-72 w-full max-w-6xl md:max flex-col items-center justify-center rounded-xl border-2 border-blue-100 bg-neutral-50 px-4 shadow-md md:mt-28">
       <div className="flex h-full flex-col items-center">
         {icon && <div className="mt-6 h-24 w-24">{icon}</div>}
         <div className="mt-6 flex flex-col">