From 1825563a3ad5698e0656215fe158f522441aef9b Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Tue, 25 Feb 2025 17:27:21 +0100
Subject: [PATCH] fix the card size on homepage

---
 hub/services/templates/services/homepage.html | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/hub/services/templates/services/homepage.html b/hub/services/templates/services/homepage.html
index 52bfd37..3143884 100644
--- a/hub/services/templates/services/homepage.html
+++ b/hub/services/templates/services/homepage.html
@@ -38,22 +38,22 @@
       <div class="section__grid">
         <div class="row">
           {% for service in featured_services %}
-          <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
-            <div class="card">
+            <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
+            <div class="card h-100 d-flex flex-column">
               <div class="card__image">
-                  <a href="{{ service.get_absolute_url }}"><img class="img-fluid" src="{{ service.logo.url }}" alt="{{ service.name }} logo"></a>
+                <a href="{{ service.get_absolute_url }}"><img class="img-fluid" src="{{ service.logo.url }}" alt="{{ service.name }} logo"></a>
               </div>
               <div class="card__header">
-                <h3 class="card__title"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h3>
-                {% for category in service.categories.all|slice:":1" %}
-                  <p class="card__subtitle">{{ category.name }}</p>
-                {% endfor %}
+              <h3 class="card__title"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h3>
+              {% for category in service.categories.all|slice:":1" %}
+                <p class="card__subtitle">{{ category.name }}</p>
+              {% endfor %}
               </div>
-              <div class="card__desc">
-                <p>{{ service.description|safe|truncatewords:15 }}</p>
+              <div class="card__desc flex-grow-1">
+              <p>{{ service.description|safe|truncatewords:15 }}</p>
               </div>
             </div>
-          </div>
+            </div>
           {% empty %}
           <div class="col-12">
             <p class="text-center">No featured services available at the moment.</p>
@@ -85,25 +85,25 @@
         <div class="row">
           <div class="section__grid">
             <div class="row">
-              {% for provider in featured_providers %}
-              <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
-                <div class="card">
+                {% for provider in featured_providers %}
+                <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
+                <div class="card h-100 d-flex flex-column">
                   <div class="card__image__wide mb-4">
-                      <a href="{{ provider.get_absolute_url }}"><img class="img-fluid" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo"></a>
+                    <a href="{{ provider.get_absolute_url }}"><img class="img-fluid" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo"></a>
                   </div>
                   <div class="card__header">
-                    <h3 class="card__title"><a href="{{ provider.get_absolute_url }}" class="text-decoration-none">{{ provider.name }}</a></h3>
+                  <h3 class="card__title"><a href="{{ provider.get_absolute_url }}" class="text-decoration-none">{{ provider.name }}</a></h3>
                   </div>
-                  <div class="card__desc">
-                    <p>{{ provider.description|safe|truncatewords:15 }}</p>
+                  <div class="card__desc flex-grow-1">
+                  <p>{{ provider.description|safe|truncatewords:15 }}</p>
                   </div>
                 </div>
-              </div>
-              {% empty %}
-              <div class="col-12">
+                </div>
+                {% empty %}
+                <div class="col-12">
                 <p class="text-center">No featured provider available at the moment.</p>
-              </div>
-              {% endfor %}
+                </div>
+                {% endfor %}
             </div>
           </div>
         </div>
@@ -130,25 +130,25 @@
       </header>
       <div class="section__grid">
         <div class="row">
-          {% for partner in featured_partners %}
-          <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
-            <div class="card">
+            {% for partner in featured_partners %}
+            <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
+            <div class="card h-100 d-flex flex-column">
               <div class="card__image__wide mb-4">
-                  <a href="{{ partner.get_absolute_url }}"><img class="img-fluid" src="{{ partner.logo.url }}" alt="{{ partner.name }} logo"></a>
+                <a href="{{ partner.get_absolute_url }}"><img class="img-fluid" src="{{ partner.logo.url }}" alt="{{ partner.name }} logo"></a>
               </div>
               <div class="card__header">
-                <h3 class="card__title"><a href="{{ partner.get_absolute_url }}" class="text-decoration-none">{{ partner.name }}</a></h3>
+              <h3 class="card__title"><a href="{{ partner.get_absolute_url }}" class="text-decoration-none">{{ partner.name }}</a></h3>
               </div>
-              <div class="card__desc">
-                <p>{{ partner.description|safe|truncatewords:15 }}</p>
+              <div class="card__desc flex-grow-1">
+              <p>{{ partner.description|safe|truncatewords:15 }}</p>
               </div>
             </div>
-          </div>
-          {% empty %}
-          <div class="col-12">
+            </div>
+            {% empty %}
+            <div class="col-12">
             <p class="text-center">No featured partner available at the moment.</p>
-          </div>
-          {% endfor %}
+            </div>
+            {% endfor %}
         </div>
       </div>
       <div class="page-action d-lg-none">