Fix responsiveness on home cards

Signed-off-by: Dinne Kopelevich <[email protected]>
DSACMS · Feb 11, 2025 · 3ce0ed9 · 3ce0ed9
1 parent be19cbb
commit 3ce0ed9
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git a/app/site/index.liquid b/app/site/index.liquid
@@ -18,7 +18,7 @@ layout: base
     </p>
   </section>
   <ul class="usa-card-group-home">
-    <li class="usa-card tablet:grid-col-6">
+    <li class="usa-card tablet:grid-col-9">
       <div class="usa-card-outer">
         <div class="usa-card-middle">
           <a href="{{ "/organizations/" | url}}" class="href-home">
@@ -41,7 +41,7 @@ layout: base
         </div>
       </div>
     </li>
-    <li class="usa-card tablet:grid-col-6">
+    <li class="usa-card tablet:grid-col-9">
       <div class="usa-card-outer">
         <div class="usa-card-middle">
           <a href="{{ "/projects/" | url}}" class="href-home">

diff --git a/app/src/css/style.css b/app/src/css/style.css
@@ -90,26 +90,27 @@ h2 {
 /* Cards */
 .usa-card-group-home {
   display: flex;
-  flex-direction: row;
-  list-style-type: none;
-  margin-left: -80px;
+  flex-direction: column;
+  width: 95vw;
+  align-items: center;
+  margin-left: -8%;
 }
 
 .usa-card-outer {
   display: flex;
   background-color: #043884;
   border: none;
-  border-radius: 70px;
-  height: 20vh;
-  width: 25vw;
+  border-radius: 100px;
+  height: 15vh;
+  width: 100%;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
 .usa-card-middle {
   display: flex;
   background-color: #5C85C1;
   border: none;
-  border-radius: 70px;
+  border-radius: 100px;
   height: 100%;
   margin-left: -5px;
   width: 98%;
@@ -137,7 +138,7 @@ h2 {
   align-items: center;
   background-color: #E0EAF8;
   border: none;
-  border-radius: 70px;
+  border-radius: 100px;
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -152,7 +153,7 @@ h2 {
   background-color: #fff;
   border-radius: 50%;
   display: flex;
-  height: 100px;
+  height: 75px;
   justify-content: center;
   margin-left: 6%;
   width: 100px;
@@ -672,6 +673,10 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   .graph-box {
     height: 600px;
   }
+
+  .home-icon-container {
+    height: 90px;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -697,4 +702,24 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   .usa-nav-link {
     text-decoration: none;
   }
+
+  .usa-card-group-home {
+    display: flex;
+    flex-direction: row;
+    margin-left: 0;
+  }
+
+  .usa-card-outer {
+    height: 20vh;
+  }
+
+  .usa-card-outer,
+  .usa-card-middle,
+  .usa-card__container {
+    border-radius: 80px;
+  }
+
+  .home-icon-container {
+    height: 100px;
+  }
 }