(#471) Refine image layout on the About page for mobile devices:

- Updated image grid to span full width on mobile. - In the staff section, images remain aligned to the left, with text on the right. When the text exceeds the image height, it wraps beneath and occupies full width for better readability.
falling-fruit · Oct 9, 2024 · c4b53cb · c4b53cb
1 parent 2ab7219
commit c4b53cb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/src/components/about/PageTemplate.js b/src/components/about/PageTemplate.js
@@ -83,18 +83,21 @@ const PageTemplateWrapper = styled.article`
     }
 
     @media ${({ theme }) => theme.device.mobile} {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+      overflow: hidden;
+      margin-top: 20px;
 
       img {
         max-width: 100%;
-        height: auto;
+        height: 100%;
+        float: left;
+        clear: left;
       }
+    }
 
-      p {
-        margin-bottom: 12px;
-      }
+    .div-aux {
+      float: left;
+      width: 0px;
+      height: 170px;
     }
   }
 `

diff --git a/src/components/about/PhotoGridUtils.js b/src/components/about/PhotoGridUtils.js
@@ -2,7 +2,7 @@ import styled from 'styled-components/macro'
 
 const Grid = styled.div`
   @media ${({ theme }) => theme.device.mobile} {
-    grid-template-columns: repeat(2, minmax(0, 160px));
+    grid-template-columns: repeat(2, 1fr);
     gap: 6px;
     margin-top: 17px;
     margin-bottom: 17px;
@@ -22,8 +22,8 @@ const Grid = styled.div`
 const Image = styled.img`
   @media ${({ theme }) => theme.device.mobile} {
     width: 100%;
-    max-width: 160px;
-    height: 94px;
+    max-height: 250px;
+    height: auto;
   }
   @media ${({ theme }) => theme.device.desktop} {
     width: 156px;

diff --git a/src/components/about/ProjectPage.js b/src/components/about/ProjectPage.js
@@ -107,6 +107,7 @@ const Project = () => (
       <h2>Staff</h2>
       <div className="content">
         <img src="https://fallingfruit.org/ethan_welty.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <em>Executive Director</em>
           <br />
@@ -136,6 +137,7 @@ const Project = () => (
       <h2>Board of directors</h2>
       <div className="content">
         <img src="https://fallingfruit.org/jeff_wanner.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <em>President</em>
           <br />
@@ -158,6 +160,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/craig_durkin.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Craig Durkin</b>
           <br />
@@ -176,6 +179,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/emily_sigman.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Emily Sigman</b>
           <br />
@@ -204,6 +208,7 @@ const Project = () => (
       <h2>Board of advisors</h2>
       <div className="content">
         <img src="https://fallingfruit.org/alan_gibson.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Alan Gibson</b>
           <br />
@@ -226,6 +231,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/ana_carolina_de_lima.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Ana Carolina de Lima</b>
           <br />
@@ -246,6 +252,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/caleb_phillips.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Caleb Phillips</b>
           <br />
@@ -269,6 +276,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/cristina_rubke.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Cristina Rubke</b>
           <br />
@@ -295,6 +303,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/david_craft.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>David Craft</b>
           <br />
@@ -315,6 +324,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/tristram_stuart.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Tristram Stuart</b>
           <br />