Fix Featured courses responsiveness

Signed-off-by: Kipruto <[email protected]>
CodeForAfrica · Nov 10, 2023 · 385c0b0 · 385c0b0
1 parent ae967b6
commit 385c0b0
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 4 deletions.
diff --git a/wp-content/themes/academyAfrica/assets/css/dist/widgets/learndash_course_grid.css b/wp-content/themes/academyAfrica/assets/css/dist/widgets/learndash_course_grid.css
diff --git a/wp-content/themes/academyAfrica/assets/css/dist/widgets/learndash_course_grid.css.map b/wp-content/themes/academyAfrica/assets/css/dist/widgets/learndash_course_grid.css.map
diff --git a/wp-content/themes/academyAfrica/assets/css/src/widgets/learndash_course_grid.scss b/wp-content/themes/academyAfrica/assets/css/src/widgets/learndash_course_grid.scss
@@ -5,14 +5,21 @@
     .grid {
         display: flex;
         justify-content: space-between;
+        align-items: center;
+        gap: 80px;
 
         .item {
             width: 280px;
             max-width: 280px;
             border: 0.5px solid $color-neutral-200;
             background-color: $color-shades-white;
+            align-self: stretch;
 
             article {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+
                 .thumbnail {
                     .ribbon {
                         display: none;
@@ -40,11 +47,14 @@
                     padding: 20px;
                     display: flex;
                     flex-direction: column;
-                    flex: 1 0 0;
+                    height: 100%;
+                    justify-content: space-between;
                     background: $color-shades-white;
 
                     .top-meta {
                         .entry-title {
+                            height: 100%;
+
                             a {
                                 color: $color-primary-700;
                                 font-size: 18px;
@@ -127,7 +137,7 @@
                             display: flex;
                             align-items: center;
                             justify-content: center;
-                            padding: 4px 10px ;
+                            padding: 4px 10px;
                             min-width: 54px;
                         }
                     }
@@ -136,4 +146,27 @@
 
         }
     }
+
+    @include media-breakpoint-down(tablet) {
+        .grid {
+            flex-direction: column;
+            gap: 20px;
+
+            .item {
+                width: 100%;
+                max-width: 100%;
+            }
+        }
+    }
+
+    @include media-breakpoint-down(desktop) {
+        .grid {
+            gap: 20px;
+
+            .item {
+                width: 100%;
+                max-width: 100%;
+            }
+        }
+    }
 }