Fix layout issues around images on the About page for narrow screens (#…

…471): - 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 · 18deada · 18deada
1 parent a69e0ed
commit 18deada
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/src/components/about/PageTemplate.js b/src/components/about/PageTemplate.js
@@ -71,12 +71,34 @@ const PageTemplateWrapper = styled.article`
   }
 
   .content {
-    display: inline-flex;
-    align-items: flex-start;
     margin-top: 10px;
+
     p {
       margin: 0;
     }
+
+    @media ${({ theme }) => theme.device.desktop} {
+      display: inline-flex;
+      align-items: flex-start;
+    }
+
+    @media ${({ theme }) => theme.device.mobile} {
+      overflow: hidden;
+      margin-top: 20px;
+
+      img {
+        max-width: 100%;
+        height: 100%;
+        float: left;
+        clear: left;
+      }
+    }
+
+    .div-aux {
+      float: left;
+      width: 0px;
+      height: 170px;
+    }
   }
 `
 

diff --git a/src/components/about/PhotoGridUtils.js b/src/components/about/PhotoGridUtils.js
@@ -2,25 +2,28 @@ import styled from 'styled-components/macro'
 
 const Grid = styled.div`
   @media ${({ theme }) => theme.device.mobile} {
-    grid-template-columns: 160px 160px;
+    grid-template-columns: repeat(2, 1fr);
     gap: 6px;
     margin-top: 17px;
     margin-bottom: 17px;
+    justify-content: center;
+    float: 'top';
   }
   @media ${({ theme }) => theme.device.desktop} {
     margin: 16px;
     gap: 8px;
     grid-template-columns: 156px auto;
+    float: ${(props) => props.float || 'right'};
   }
   color: ${({ theme }) => theme.secondaryText};
-  float: ${(props) => props.float || 'right'};
   display: grid;
 `
 
 const Image = styled.img`
   @media ${({ theme }) => theme.device.mobile} {
-    width: 160px;
-    height: 94px;
+    width: 100%;
+    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 />