Incremental fix to the alignment of 'by the numbers section' (#482)

Co-authored-by: Jaswanth Damarla <[email protected]>
sugarlabs · Oct 16, 2024 · 0e148ad · 0e148ad
1 parent dc14d5f
commit 0e148ad
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/css/airspace.css b/css/airspace.css
@@ -353,11 +353,28 @@ font header .navbar-default .navbar-nav li a:hover {
   padding-top: 50px;
   color: #7B7B7B;
 }
+#testimonial .block h4 {
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 1.5;  /* Better line-height for spacing */
+}
+#testimonial .block span {
+  color: #555;
+  font-size: 18px; /* Adjusted for consistency */
+  line-height: 1.5;
+  display: block;
+  margin-bottom: 10px;  /* Adds consistent spacing between elements */
+}
+#testimonial .counter-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
 #testimonial .counter-box li {
-  width: 50%;
-  float: left;
-  text-align: center;
-  margin: 17px 0 30px;
+  width: 45%;  /* Adjusted for better fit */
+  margin: 20px 0;
+  list-style-type: none;
 }
 #testimonial .counter-box li i {
   font-size: 35px;

diff --git a/index.html b/index.html
@@ -114,9 +114,9 @@ <h2 class="text-center customMargin1">What about Sugar Labs interests you?</h2>
 <section id="testimonial" class="customPadding5">
   <div class="container">
     <div class="row">
-      <div class="col-md-12" >
+      <div class="col-md-12">
         <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2" >
+          <div class="col-md-8 col-md-push-2">
             <div class="section-title text-center">
               <h2>Sugar Labs by the numbers</h2>
               <p class="customParagraphStyle">Sugar Labs, founded in 2008, has had an impact on the lives of many. Here are some of the statistics we are tracking.</p>
@@ -126,40 +126,39 @@ <h2>Sugar Labs by the numbers</h2>
         <div class="row justify-content-around">
           <div class="col-md-5 col-md-push-1">
             <div class="block">
-              <ul class="counter-box clearfix">
-                <li>
-                  <div class="block">
+              <ul class="counter-box clearfix" style="display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none;">
+                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                  <div class="block" style="text-align: center;">
                     <h4>55+</h4>
                     <span>Mentors helping youth learn in programs like Google Code-In (GCI) and Google Summer of Code</span>
                   </div>
                 </li>
-		<li>
-                  <div class="block">
+                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                  <div class="block" style="text-align: center;">
                     <h4>1,450+</h4>
                     <span>Problem-solving tasks completed by students ages 13-17.</span>
                   </div>
                 </li>
-		<li>
-                  <div class="block">
+                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                  <div class="block" style="text-align: center;">
                     <h4>344+</h4>
                     <span>Projects for teaching and learning created by Sugar Labs students and teachers.</span>
                   </div>
                 </li>
-		<li>
-                  <div class="block">
+                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                  <div class="block" style="text-align: center;">
                     <h4>11,531,321+</h4>
                     <span>Activities Downloaded</span>
                   </div>
                 </li>
-                <li>
-                  <div class="block">
+                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                  <div class="block" style="text-align: center;">
                     <h4>3,000,000+</h4>
-                    <span>Kids whose lives have been enriched by using the Sugar Learning Platform</span>
+                   <span>Kids whose lives have been enriched by using the Sugar Learning Platform</span>
                   </div>
                 </li>
-		<li>
-                  <!--<li class="fullWidth">-->
-                  <div class="block">
+                <li style="flex-basis: 45%; margin-bottom: 20px;">
+                  <div class="block" style="text-align: center;">
                     <h4>170</h4>
                     <span>Languages our educational software has been translated into</span>
                   </div>