From 7d3d0cb2f2998ec741d6a54a47f7219dcc823bc3 Mon Sep 17 00:00:00 2001
From: Felix Hallenberg <feqwin@gmail.com>
Date: Sun, 24 Nov 2024 09:48:51 +0200
Subject: [PATCH] Improve responsiveness

---
 src/landing/index.html | 12 ++++++------
 src/landing/styles.css |  7 ++++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/landing/index.html b/src/landing/index.html
index 4a4c2664..3c819325 100644
--- a/src/landing/index.html
+++ b/src/landing/index.html
@@ -68,11 +68,11 @@ <h2 class="card-h2">Aalto</h2>
                     </div>
                     <div class="mentor-card-content">
                        <div class="mentor-card-story-container">
-                          <h2 class="black" localization-key="mentorCardMyStory"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
                           <p class="card-p">Olen nuorisokodista itsenäistynyt teini-ikäisen pojan vanhempi. Voin olla sinulle tukena opintoihin, itsenäistymiseen, jälkihuoltoon ja vanhemmuuteen liittyvissä asioissa.</p>
                        </div>
                        <div class="mentor-card-languages-container">
-                          <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
                           <div class="pill-container">
                              <div class="pill">
                                 <p class="card-p">Suomi</p>
@@ -83,7 +83,7 @@ <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
                           </div>
                        </div>
                        <div class="mentor-card-skill-container">
-                          <h2 class="black" localization-key="mentorCardSkills"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
                           <div class="pill-container">
                              <div class="pill">
                                 <p class="card-p">Lastensuojelu</p>
@@ -123,11 +123,11 @@ <h2 class="card-h2">Havu</h2>
                     </div>
                     <div class="mentor-card-content">
                        <div class="mentor-card-story-container">
-                          <h2 class="black" localization-key="mentorCardMyStory"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
                           <p class="card-p">Olen helsinkiläinen Havu. Voin olla sinulle tukena esimerkiksi mielenterveyteen liittyvissä pulmissa. Tuen sinua parhaani mukaan kuitenkin missä tahansa aiheessa.</p>
                        </div>
                        <div class="mentor-card-languages-container">
-                          <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
                           <div class="pill-container">
                              <div class="pill">
                                 <p class="card-p">Suomi</p>
@@ -138,7 +138,7 @@ <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
                           </div>
                        </div>
                        <div class="mentor-card-skill-container">
-                          <h2 class="black" localization-key="mentorCardSkills"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
                           <div class="pill-container">
                              <div class="pill">
                                 <p class="card-p">Mielenterveys</p>
diff --git a/src/landing/styles.css b/src/landing/styles.css
index 8509dce8..1d2a9563 100644
--- a/src/landing/styles.css
+++ b/src/landing/styles.css
@@ -366,10 +366,11 @@ footer {
 
   .middle-card {
     flex-direction: column-reverse;
+    height: auto;
   }
   
   .middle-right-content {
-    padding: 8px;
+    padding: 1rem;
   }
 
   .middle-left-content {
@@ -416,4 +417,8 @@ footer {
   .ylitse-logo {
     height: 8rem;
   }
+
+  .middle-bottom-footer {
+    padding: 1rem;
+  }
 }