rewrite styling to fit mobile

vektorprogrammet · Oct 14, 2024 · a97ce21 · a97ce21
1 parent ae0fc58
commit a97ce21
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/components/TextPictureCard.tsx b/src/components/TextPictureCard.tsx
@@ -17,18 +17,18 @@ const TextPictureCard = ({
     <img
       src={imgPath.href}
       alt={alt}
-      className="max-h-96 mt-6 rounded-lg mx-auto sm:w-auto md:max-w-md"
+      className="max-h-96 rounded-lg sm:w-auto md:max-w-md"
     />
   );
 
   return (
-    <div className="flex w-full mx-auto justify-between flex-wrap mt-10">
+    <div className="flex w-full gap-5 justify-between flex-wrap">
       {pictureOnLeft && image}
       <div className="max-w-6xl m-auto">
-        <h1 className="text-center mt-7 text-2xl dark:text-gray-200">
+        <h1 className="text-center text-xl font-bold text-vektor-DARKblue dark:text-text-dark">
           {title}
         </h1>
-        <p className="max-w-lg text-xl mt-3 px-3 dark:text-gray-300">{text}</p>
+        <p className="max-w-lg text-md dark:text-text-dark">{text}</p>
       </div>
       {!pictureOnLeft && image}
     </div>

diff --git a/src/pages/public/ForForeldre/components/ForForeldre.tsx b/src/pages/public/ForForeldre/components/ForForeldre.tsx
@@ -4,11 +4,11 @@ import TextPictureCard from "@/components/TextPictureCard";
 const ForForeldre = (): JSX.Element => {
   const { title, ingress, cards, bottomText } = getContent();
   return (
-    <div className="max-w-screen-lg mt-20 mb-20 mx-auto flex flex-col items-center dark:text-text-dark">
-      <h1 className="max-w-2xl text-vektor-DARKblue text-4xl text-center font-bold mx-3 dark:text-text-dark">
+    <div className="max-w-screen-lg p-5 mt-20 mb-20 mx-auto gap-5 flex flex-col items-center dark:text-text-dark">
+      <h1 className="max-w-2xl text-vektor-darkblue text-2xl text-center font-bold dark:text-text-dark">
         {title}
       </h1>
-      <p className="max-w-2xl text-center mt-4 mb-20 text-xl mx-3">{ingress}</p>
+      <p className="max-w-2xl text-md">{ingress}</p>
       {cards.map(({ title: cardTitle, text, image }) => (
         <TextPictureCard
           key={cardTitle}
@@ -18,7 +18,7 @@ const ForForeldre = (): JSX.Element => {
           alt={image.alt}
         />
       ))}
-      <p className="max-w-2xl text-center mt-20 text-xl mx-auto">
+      <p className="max-w-2xl text-md">
         {bottomText}
       </p>
     </div>