Update team cards margin & About mobile responsive

RecyLife · Oct 13, 2024 · c4f552c · c4f552c
1 parent 2593479
commit c4f552c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -89,7 +89,7 @@ <h2 class="about-title">À propos</h2>
             </div>
         </section>   
         <section id="team" class="main-section team">
-            <div class="member-card">
+            <div class="member-card first">
                 <img src="./images/members/aster.png" alt="Achille Roussel logo" class="member-photo">
                 <div class="name-role-container">
                     <h1 class="member-name">Achille Roussel</h1>

diff --git a/styles/about.css b/styles/about.css
@@ -63,6 +63,18 @@
     }
 }
 
+@media screen and (max-height: 950px) {
+        .about-text {
+            line-height: 1.5em;
+        }
+}
+
+@media screen and (max-height: 900px) {
+    .about-text {
+        line-height: 1.35em;
+    }
+}
+
 @media screen and (max-width: 500px) {
     .about {
         display: flex;

diff --git a/styles/team.css b/styles/team.css
@@ -128,6 +128,11 @@
 @media screen and (max-width: 455px) {
     .member-card {
         flex-basis: calc(100vw - 100px);
+        margin-left: -10vw;
+    }
+
+    .member-card.first{
+        margin-left: 0px;
     }
 }