From 2630dc03d71f492f722a2f3005b75fa5a7d407a7 Mon Sep 17 00:00:00 2001
From: Tegar D Pratama <tegar1195@gmail.com>
Date: Fri, 5 Mar 2021 07:05:50 +0900
Subject: [PATCH] fix: block-cta-wrapper breaking the layout in mobile view. 
 (#41299)

* fix: client bug in mobile view

* fix: show card title elemenbts in column on small screens

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 client/src/templates/Introduction/intro.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 516fe03a71f..c075ec73e45 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -14,6 +14,11 @@
   flex-direction: row;
 }
 
+.block-title-wrapper .block-link {
+  flex-grow: 3;
+  flex-basis: 0;
+}
+
 .block-link:hover,
 .block-link:focus,
 .block-link:active {
@@ -59,6 +64,10 @@
   justify-content: center;
   padding: 25px 15px 10px 0px;
   margin: 0 0 0.6rem;
+  flex-grow: 2;
+  flex-basis: 0;
+  font-size: 0.8rem;
+  text-align: center;
 }
 
 .course-title {
@@ -240,6 +249,14 @@ button.map-title {
     font-size: 1.17rem;
   }
 
+  .block-title-wrapper {
+    flex-direction: column;
+  }
+
+  .block-cta-wrapper {
+    padding: 25px 15px 10px 15px;
+  }
+
   .course-title,
   .map-cert-title,
   .map-challenge-title {