Update: card responsiveness fix

ContriHUB · Oct 23, 2024 · eb5befe · eb5befe
1 parent 8878a2d
commit eb5befe
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/user_profile/templates/user_profile/issue_card.html b/user_profile/templates/user_profile/issue_card.html
@@ -1,4 +1,4 @@
-<div class='d-flex justify-content-center gap-3 mb-4 flex-wrap'>
+<div class='d-flex justify-content-center gap-3 mb-4 ' style="height:15rem;">
     <div class='px-5 py-3 fs-1 bg-white align-content-center' style='width: 200px; border-radius: 7px;'>  <!-- Left column for total problems -->
         <h5>Total Issues Solved:</h5>
         <p>
@@ -9,16 +9,16 @@ <h5>Total Issues Solved:</h5>
 
     <div class='d-flex flex-column p-3 bg-white' style='border-radius: 7px; height: 100%;'>
         <div class="d-flex flex-column flex-grow-1 gap-1 ">
-            <div class="w-100 badge badge-pill flex-grow-1 align-content-center" style="background-color: #33b5e5; padding: .75rem 3rem;">
+            <div class="w-100 badge badge-pill flex-grow-1 align-content-center" style="background-color: #33b5e5; padding: .75rem 1.5rem;">
                 <div class="box fs-6">Very-easy Issue.: {{ veasyProblems }}</div>
             </div>
-            <div class="w-100 badge badge-pill flex-grow-1 align-content-center" style="background-color: #00b74a; padding: .75rem 3rem;">
+            <div class="w-100 badge badge-pill flex-grow-1 align-content-center" style="background-color: #00b74a; padding: .75rem 1.5rem;">
                 <div class="box fs-6">Easy Issue: {{ easyProblems }}</div>
             </div>
-            <div class="w-100 badge badge-pill flex-grow-1 align-content-center" style="background-color: #ffa900; padding: .75rem 3rem;">
+            <div class="w-100 badge badge-pill flex-grow-1 align-content-center" style="background-color: #ffa900; padding: .75rem 1.5rem;">
                 <div class="box fs-6">Medium Issue: {{ mediumProblems }}</div>
             </div>
-            <div class="w-100 badge badge-pill flex-grow-1 align-content-center" style="background-color: #ff3547; padding: .75rem 3rem;">
+            <div class="w-100 badge badge-pill flex-grow-1 align-content-center" style="background-color: #ff3547; padding: .75rem 1.5rem;">
                 <div class="box fs-6">Hard Issue: {{ hardProblems }}</div>
             </div>
         </div>