Website: update order of statistics on mobile homepage (#26427)

Closes: fleetdm/confidential#9668 Changes: - Updated the order of the stacked statistics on the homepage on mobile devices (<575px)
fleetdm · Feb 18, 2025 · ba61420 · ba61420
1 parent f596b9f
commit ba61420
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
@@ -1464,6 +1464,9 @@
       margin-top: 32px;
     }
     [purpose='statistics'] {
+      [purpose='statistics-column'] {
+        flex-direction: column-reverse;
+      }
       flex-direction: column;
       max-width: fit-content;
       margin-left: auto;
@@ -1474,22 +1477,21 @@
         margin-bottom: 0px;
       }
       [purpose='customers'] {
-        padding: 0px 24px 24px 24px;
         border-right: none;
+        padding: 24px 24px 0px 24px;
       }
       [purpose='devices'] {
-        border-top: 1px solid #E2E4EA;
-        border-bottom: 1px solid #E2E4EA;
-        padding: 24px;
+        padding: 0px 24px 24px 24px;
         border-right: none;
       }
       [purpose='response-time'] {
         padding: 24px;
         border-bottom: 1px solid #E2E4EA;
       }
       [purpose='countries'] {
-        order: 1;
-        padding: 24px 24px 0px 24px;
+        // order: 1;
+        border-top: 1px solid #E2E4EA;
+        border-bottom: 1px solid #E2E4EA;
         border-right: none;
       }
     }

diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
@@ -52,20 +52,28 @@
     <logo-carousel></logo-carousel>
     <div purpose="statistics">
       <div purpose="statistics-column">
-        <div purpose="customers">
+        <div purpose="customers" class="d-none d-sm-block">
           <h4>100+</h4>
           <p>customers</p>
         </div>
+        <div purpose="countries" class="d-block d-sm-none">
+          <h4>90+</h4>
+          <p>countries</p>
+        </div>
         <div purpose="devices">
           <h4>2,000,000+</h4>
           <p>computing devices</p>
         </div>
       </div>
       <div purpose="statistics-column">
-        <div purpose="countries">
+        <div purpose="countries" class="d-none d-sm-block">
           <h4>90+</h4>
           <p>countries</p>
         </div>
+        <div purpose="customers" class="d-block d-sm-none">
+          <h4>100+</h4>
+          <p>customers</p>
+        </div>
         <div purpose="response-time">
           <h4>8 minutes</h4>
           <p>avg support response time</p>