Merge pull request #9 from 40Q/fix/stats-block-responsive

Stats Block Responsive - add fixes to Stats & Text Image block
40Q · Mar 14, 2024 · 2f2e512 · 2f2e512
2 parents ff2a9ba + 8d282d0
commit 2f2e512
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/resources/views/blocks/stats.blade.php b/resources/views/blocks/stats.blade.php
@@ -1,10 +1,10 @@
-<section class="stats-block flex py-16 justify-center">
+<section class="stats-block flex pb-17 pt-4 lg:py-16 justify-center">
     <div class="container">
-        <div class="grid grid-cols-4 gap-6">
+        <div class="flex flex-col gap-6 sm:grid sm:grid-cols-2 sm:gap-8 xl:grid-cols-4 lg:gap-6">
             @foreach ($stats as $stat)
-                <div class="flex gap-4 items-center">
-                    <h2 class="text-primary-dark text-5xl font-normal !whitespace-nowrap">{!! $stat['statNumber'] !!}</h2>
-                    <p class="text-lg font-bold leading-5 !whitespace-nowrap">{!! $stat['statName'] !!}</p>
+                <div class="flex gap-4 md:justify-center items-center">
+                    <h2 class="text-primary-dark text-5xl sm:text-4xl md:text-5xl font-normal !whitespace-nowrap">{!! $stat['statNumber'] !!}</h2>
+                    <p class="text-lg sm:text-base md:text-lg font-bold leading-5 !whitespace-nowrap">{!! $stat['statName'] !!}</p>
                 </div>
             @endforeach
         </div>

diff --git a/resources/views/blocks/text-image.blade.php b/resources/views/blocks/text-image.blade.php
@@ -9,7 +9,7 @@
                     </div>
                 </div>
             @endif
-            <div class="max-md:px-4 lg:w-1/2 relative z-50 text-white flex flex-col items-start md:items-center justify-center lg:justify-start lg:items-start gap-3 lg:gap-4">
+            <div class="container lg:w-1/2 relative z-50 text-white flex flex-col items-start md:items-center justify-center lg:justify-start lg:items-start gap-3 lg:gap-4">
                 <x-section-header containerClasses="text-start md:text-center lg:text-start lg:w-auto" 
                     eyebrowClasses="max-md:leading-none text-primary-dark max-md:uppercase" 
                     headingClasses="text-text max-md:text-3xxl max-md:font-medium max-md:leading-tight tracking-tight md:tracking-wider max-md:uppercase" 
@@ -22,4 +22,4 @@
             </div>
         </div>
     </div>
-</section>
+</section>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -108,6 +108,10 @@ export default {
             padding: '0',
           },
           '@screen xl': {
+            maxWidth: '1140px',
+            padding: '0',
+          },
+          '@screen 2xl': {
             maxWidth: '1304px',
             padding: '0',
           },