improve grid responsiveness

CDCgov · Nov 13, 2024 · 3cd55f5 · 3cd55f5
1 parent 59ae65e
commit 3cd55f5
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
@@ -19,14 +19,14 @@ export default function EngageWithUs() {
         subheader="Learn how your jurisdiction can start working with the DIBBs team."
       />
       <ContentContainer>
-        <Grid row gap={6}>
-          <Grid col={6}>
+        <div className="grid grid-cols-1 justify-items-center gap-6 lg:grid-cols-2 lg:justify-items-start">
+          <div>
             <Left />
-          </Grid>
-          <Grid col={6}>
+          </div>
+          <div>
             <Right />
-          </Grid>
-        </Grid>
+          </div>
+        </div>
       </ContentContainer>
     </div>
   );
@@ -41,9 +41,9 @@ function Left() {
       </p>
       <Form
         onSubmit={() => {}}
-        className="align-start flex min-w-[31.25rem] flex-col gap-y-2"
+        className="align-start flex flex-col gap-y-2 lg:min-w-[31.25rem]"
       >
-        <div className="max-w-[70%]">
+        <div className="lg:max-w-[70%]">
           <Label
             htmlFor="name"
             className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
@@ -54,7 +54,7 @@ function Left() {
             id="name"
             name="name"
             type="text"
-            className="max-w-[2rem]"
+            className="lg:max-w-[2rem]"
           />
           <Label
             htmlFor="email"
@@ -111,15 +111,15 @@ function Right() {
   return (
     <>
       <div id="content" className="flex flex-col gap-10 pt-4">
-        <div className="border border-dashed bg-white p-4 text-center">
+        <div className="border border-dashed bg-white p-4 text-center lg:p-[1.75rem]">
           <p className="text-center text-[1.40rem] font-bold leading-[2rem] text-black">
             All consultations with the DIBBs team are 100% free. There's no cost
             to use our products beyond costs to host within your jurisdiction
             should you choose to do so.
           </p>
         </div>
         <div>
-          <div className="ml-2 flex min-w-[35.25rem] flex-col gap-2">
+          <div className="ml-2 flex flex-col gap-2 lg:min-w-[35.25rem]">
             <p className="text-[1.38rem] font-bold italic leading-[2rem] text-[#224a58]">
               "Our epidemiologists waste 80% of their time cleaning data and
               can't do useful analysis. The end goal of DIBBs infrastructure is