Fix alignment of news section on About page (#2969)

* make changes reflective to Figma design for HfLA in the news * update the width property on news-cells * add new width property for desktop view on news-cells
hackforla · Mar 16, 2022 · b883cd0 · b883cd0
1 parent 5f4e176
commit b883cd0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/_includes/about-page/about-card-news.html b/_includes/about-page/about-card-news.html
@@ -1,11 +1,13 @@
 <div class='card-primary page-card-lg page-card--about last-card'>
     <div class="about-us-section-header" data-hash="news"><span class="sec-head-img"><img src="/assets/images/about/section-header-elements/news.svg"></span>HfLA in the News</div>
     <div class="about-us-section-content">
-        <div class="flex-container">
+        <div class="flex-container news-container ">
             {% for item in site.data.internal.press %}
                 <div class="news-cells">
-                    <img src="{{item[1].image}}" alt="{{item[1].image_alt}}" />
-                    <p class="more-padding"><a href="{{item[1].link_url}}" target="_blank" rel="noopener noreferrer">{{item[1].title}}</a></p>
+                    <div class="image-news-container">
+                        <img src="{{item[1].image}}" alt="{{item[1].image_alt}}" />
+                    </div>
+                    <p><a href="{{item[1].link_url}}" target="_blank" rel="noopener noreferrer">{{item[1].title}}</a></p>
                 </div>
             {% endfor %}
         </div>

diff --git a/_sass/components/_about.scss b/_sass/components/_about.scss
@@ -563,19 +563,21 @@ a.anchor {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
-  padding: 25px 0 15px 0;
   align-items: center;
+  width: 55.733vw;
+  padding-bottom: 45px; 
 }
-
-.news-cells p {
-  padding-top: 40px;
-  margin: 0 20px 0 20px;
+.image-news-container{
+  height: 100px;
+  display: flex;
+  align-content: center;
+  margin-bottom: 30px;
 }
-
-.more-padding {
-  padding-top: 10px;
+.flex-container.news-container{
+  align-items: center;
 }
 
+
 /* Below are the breakpoints and adjustments for different size monitors */
 
 // Below tablet - 768px
@@ -811,9 +813,21 @@ a.anchor {
     padding-left: 25px;
   }
 
-  .news-cells p {
-    padding-top: 48.33px;
-    margin: 0 20px 0 20px;
+  .flex-container.news-container{
+    flex-basis: auto;
+    column-gap: 2.863vw;
+    align-items: baseline;
+    margin-bottom: 67px;
+  }
+  .image-news-container{
+      margin-bottom: 48px;
+      height: 100px;
+  }
+
+  .news-cells {
+    justify-content: unset;
+    padding-bottom: unset;
+    width: 33.3%;
   }
 
   .news-cells--govtech {