fixed: responsivity

nlsnbucket · Aug 8, 2023 · 7487750 · 7487750
1 parent e5c261a
commit 7487750
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/src/components/Article.tsx b/src/components/Article.tsx
@@ -8,15 +8,21 @@ interface ArticleProps {
   textFirst?: boolean
 }
 
-export const Article = ({imageData, alt="", title, content, textFirst=false}: ArticleProps) => {
+export const Article = ({ imageData, alt = "", title, content, textFirst = false }: ArticleProps) => {
   return (
-    <article data-text-first={textFirst} className="flex gap-32 data-[text-first=true]:flex-row-reverse flex-wrap">
-      <Image src={imageData} alt={alt} width={250} height={250}/>
 
-      <div>
-        <h2 className="text-4xl mb-7">{title}</h2>
-        <p className="text-3xl">{content}</p>
-      </div>
-    </article>
+    <div className='lg:min-h-[40vh] max-h-[700px] flex justify-center items-center max-w-full'>
+      <article
+        data-text-first={textFirst}
+        className={`max-w-full flex  w-full m-auto max-w-full flex-wrap md:flex-nowrap justify-between md:gap-16 data-[text-first=true]:flex-row-reverse`}
+      >
+        <Image className="max-w-full w-200 md:w-50" src={imageData} alt={alt} width={200} height={200} />
+        <div className="w-full mt-12 max-w-full">
+          <h2 className="">{title}</h2>
+          <p className="max-w-full">{content}</p>
+        </div>
+      </article>
+    </div>
+
   )
 }