From a178f668ebb85af79f402bc74fd78e1f9c78a651 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 3 Dec 2020 22:24:26 +0800
Subject: [PATCH] Fix responsiveness as much as possible for the alpha numbers
 segment

---
 www/pages/beta.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/www/pages/beta.tsx b/www/pages/beta.tsx
index 37fea87ca64..3b5cf28e6fa 100644
--- a/www/pages/beta.tsx
+++ b/www/pages/beta.tsx
@@ -183,14 +183,14 @@ const Introduction = () => {
           {AlphaNumbers.map((stat: any, idx: number) => (
             <div
               key={`stat_${idx}`}
-              className="col-span-6 sm:col-span-4 grid grid-cols-8 sm:grid-cols-12 xl:gap-x-6 items-center"
+              className="col-span-6 sm:col-span-4 grid grid-cols-8 sm:grid-cols-12 gap-x-1 md:gap-x-0 xl:gap-x-6 items-center"
             >
-              <div className="col-span-3 sm:col-span-3 xl:col-span-2">
+              <div className="col-span-4 sm:col-span-4 md:col-span-3 xl:col-span-2">
                 <div className="w-12 h-12 rounded-md bg-dark-700 flex items-center justify-center bg-gray-900 dark:bg-white">
                   {stat.icon}
                 </div>
               </div>
-              <div className="col-span-5 sm:col-span-9 xl:col-span-10">
+              <div className="col-span-7 sm-col-span-8 md:col-span-9 xl:col-span-10">
                 <p className="text-5xl lg:text-6xl">
                   <CountUp triggerAnimOnScroll={true} referenceElId="alphaNumbers">
                     {stat.value}
@@ -198,7 +198,7 @@ const Introduction = () => {
                   {stat.unit && <span className="text-2xl ml-1">{stat.unit}</span>}
                 </p>
               </div>
-              <div className="col-span-12 sm:col-span-10 sm:col-start-4 xl:col-start-3">
+              <div className="col-span-12 sm:col-span-9 md:col-span-10 col-start-0 sm:col-start-5 md:col-start-4 xl:col-start-3">
                 <p className="text-xs lg:text-base text-dark-300 dark:text-dark-400">{stat.name}</p>
               </div>
             </div>