make resource cards smae height

Author: hathix

_includes/resource_card.html

@@ -4,8 +4,8 @@
     name
 
 -->
-<div class="col-3">
-  <div class="card">
+<div class="col-lg-3 col-sm-6 col-12 d-flex align-items-stretch">
+  <div class="card resource-card">
     <img class="card-img-top" src="{{site.baseurl}}/assets/img/resources/{{ resource.image }}" alt="{{ resource.name }}">
     <div class="card-body">
       <h5 class="card-title">{{ resource.name }}</h5>

assets/css/custom.scss

@@ -163,3 +163,33 @@ hr.mini-divider {
   // box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;
   border-radius: 3px;
 }
+//
+// @media only screen and (min-width : 481px) {
+//    .resource-row.row {
+// 	 display: flex;
+// 	 flex-wrap: wrap;
+//    }
+//    .resource-row.row > [class*='col-'] {
+// 	 display: flex;
+// 	 flex-direction: column;
+//    }
+//   .resource-row.row:after,
+//   .resource-row.row:before {
+// 	 display: flex;
+//   }
+// }
+
+.resource-card {
+  margin-bottom: 30px;
+
+  // flex: 1 0 auto;
+  // flex-direction: column;
+  //
+  // .card-text {
+  //   flex-grow: 1;
+  // }
+  // .card-img-top {
+  //   height: auto;
+  //   width: 100%;
+  // }
+}

index.html

@@ -53,11 +53,11 @@ <h2 class="">About</h2>
       Tech Transparency aims to provide free resources which help those interested in navigate through the four core stages of getting a job in the tech industry:
     </p>
 
-    <div class="row justify-column-center">
+    <div class="row resource-row justify-column-center">
       {% for step in site.data.job_hunt_steps %}
       <div class="col">
         <a href="{{ step.url}}">
-          <div class="card">
+          <div class="card resource-card">
             <img class="card-img-top" src="{{site.baseurl}}/assets/img/resources/{{ step.image }}" alt="{{ step.name }}">
             <div class="card-body">
               <h5 class="card-title">{{ step.name }}</h5>

resources.html

@@ -10,7 +10,7 @@ <h2>1. Choosing a Role</h2>
     <hr class="mini-divider" />
 
     <div class="container">
-      <div class="row justify-content-center">
+      <div class="row resource-row justify-content-center">
         {% for resource in site.data.roles %} {% include resource_card.html %} {% endfor %}
       </div>
     </div>
@@ -21,7 +21,7 @@ <h2>2. Choosing a Company</h2>
   <hr class="mini-divider" />
 
   <div class="container">
-    <div class="row justify-content-center">
+    <div class="row resource-row justify-content-center">
       {% for resource in site.data.company_choosing %} {% include resource_card.html %} {% endfor %}
     </div>
   </div>
@@ -32,7 +32,7 @@ <h2>3. Getting the Interview</h2>
   <hr class="mini-divider" />
 
   <div class="container">
-    <div class="row justify-content-center">
+    <div class="row resource-row justify-content-center">
       {% for resource in site.data.interview_resources %} {% include resource_card.html %} {% endfor %}
     </div>
   </div>
@@ -45,7 +45,7 @@ <h2>4. Getting the Offer</h2>
 
   <div class="container">
     <div class="container">
-      <div class="row justify-content-center">
+      <div class="row resource-row justify-content-center">
         {% for resource in site.data.interview_tips %} {% include resource_card.html %} {% endfor %}
       </div>
     </div>