Fix overlap due to excess padding and margin

AdamJ · Aug 21, 2023 · 16abed6 · 16abed6
1 parent df3d049
commit 16abed6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/docs/design/index.html b/docs/design/index.html
@@ -97,7 +97,7 @@ <h1 class="display-1 jumbo-heading">designs</h1>
     <div class="col-md-6 text-center text-md-start">
       <h2>Application Lifecycle Management</h2>
       <p class="text-body-secondary">A one-stop-shop for a team's planning and project lifecycle management.</p>
-      <a href="/designs/alm" class="btn btn-dark icon-link lead" alt="Click to experience the Application Lifecycle Management journey">
+      <a href="/designs/alm" role="button" class="btn btn-dark icon-link lead" alt="Click to experience the Application Lifecycle Management journey">
         the journey
       </a>
     </div>
@@ -109,7 +109,7 @@ <h2>Application Lifecycle Management</h2>
     <div class="col-md-6 text-center text-md-start">
       <h2>Customer Engagement App</h2>
       <p class="text-body-secondary">End-to-end tracking of customer engagement and marketing campaigns.</p>
-      <a href="/designs/customer-engagement" class="btn btn-dark icon-link lead" alt="Click to experience the Customer Engagement journey">
+      <a href="/designs/customer-engagement" role="button" class="btn btn-dark icon-link lead" alt="Click to experience the Customer Engagement journey">
         the journey
       </a>
     </div>
@@ -166,16 +166,16 @@ <h2>Environment themes</h2>
       Inspired by the PatternFly design system, I created two libraries for use with Atom.io. As atom.io is no longer available, these themes are left to history.</p>
     </div>
   </div>
-  <div class="row align-items-start gx-5">
-    <div class="col-md-3">
+  <div class="row align-items-start">
+    <div class="col-md-6 col-lg-4 px-md-3 my-2 my-md-0">
       <div class="card px-0">
         <img src="/img/atom-pf-theme.png" class="card-img-top" alt="Atom.io PatternFly Theme screenshot" height="200">
         <div class="card-body">
           <h5 class="card-title">Atom.io PatternFly theme</h5>
         </div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-6 col-lg-4 px-md-3 my-2 my-md-0">
       <div class="card px-0">
         <img src="/img/atom-pf-syntax.png" class="card-img-top" alt="Atom.io PatternFly Syntax screenshot" height="200">
         <div class="card-body">

diff --git a/src/pages/design.md b/src/pages/design.md
@@ -89,16 +89,16 @@ eleventyNavigation:
       Inspired by the PatternFly design system, I created two libraries for use with Atom.io. As atom.io is no longer available, these themes are left to history.</p>
     </div>
   </div>
-  <div class="row align-items-start gx-5">
-    <div class="col-md-3">
+  <div class="row align-items-start">
+    <div class="col-md-6 col-lg-4 px-md-3 my-2 my-md-0">
       <div class="card px-0">
         <img src="{{ "/img/atom-pf-theme.png" | url }}" class="card-img-top" alt="Atom.io PatternFly Theme screenshot" height="200">
         <div class="card-body">
           <h5 class="card-title">Atom.io PatternFly theme</h5>
         </div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-6 col-lg-4 px-md-3 my-2 my-md-0">
       <div class="card px-0">
         <img src="{{ "/img/atom-pf-syntax.png" | url }}" class="card-img-top" alt="Atom.io PatternFly Syntax screenshot" height="200">
         <div class="card-body">