FIx movile styles

wiaio · Feb 2, 2024 · 0c34418 · 0c34418
1 parent 37f8bf5
commit 0c34418
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 18 deletions.
diff --git a/src/components/approach.tsx b/src/components/approach.tsx
@@ -18,7 +18,7 @@ const Approach = () => {
             </h2>
           </div>
           <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-0 md:gap-0 gap-4 items-center relative'>
-            <div className='lg:col-span-4 relative md:col-span-4 h-full flex flex-col items-center mb-4 lg:pl-6 lg:pr-10'>
+            <div className='lg:col-span-4 relative md:col-span-4 flex flex-col items-center mb-4 lg:pl-6 lg:pr-10'>
               <div className='dotted-line'></div>
               <div className='image-circle mb-4'>
                 <FontAwesomeIcon icon={faClipboardList} className='icon' />
@@ -34,7 +34,7 @@ const Approach = () => {
                 effectiveness.
               </p>
             </div>
-            <div className='lg:col-span-4 relative md:col-span-4 h-full flex flex-col items-center mb-4 lg:pl-6 lg:pr-10'>
+            <div className='lg:col-span-4 relative md:col-span-4 flex flex-col items-center mb-4 lg:pl-6 lg:pr-10'>
               <div className='dotted-line left'></div>
               <div className='dotted-line'></div>
               <div className='image-circle mb-4'>
@@ -50,7 +50,7 @@ const Approach = () => {
                 hassle-free implementation.
               </p>
             </div>
-            <div className='lg:col-span-4 relative md:col-span-4 h-full flex flex-col items-center mb-4 lg:pl-6 lg:pr-10'>
+            <div className='lg:col-span-4 relative md:col-span-4 flex flex-col items-center mb-4 lg:pl-6 lg:pr-10'>
               <div className='dotted-line left'></div>
               <div className='image-circle mb-4'>
                 <FontAwesomeIcon

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -14,21 +14,21 @@ const Footer = () => {
       <div className='container mx-auto'>
         <div className='flex flex-col md:py-20 pt-12 pb-24 md:gap-24 gap-16 relative'>
           <div className='grid lg:grid-cols-12 md:grid-cols-12 sm:grid-cols-12 xl:gap-8 gap-4 items-center relative'>
-            <div className=' sm:col-span-4 h-full flex flex-col items-center'>
+            <div className=' sm:col-span-4 flex flex-col items-center'>
               <p className='text-body-lg font-medium'>Company</p>
               <p className='text-body-sm text-neutral-300'>About</p>
               <p className='text-body-sm text-neutral-300'>Jobs</p>
               <p className='text-body-sm text-neutral-300'>Contact</p>
             </div>
 
-            <div className=' sm:col-span-4 h-full flex flex-col items-center'>
+            <div className=' sm:col-span-4 flex flex-col items-center'>
               <p className='text-body-lg font-medium'>Legal</p>
               <p className='text-body-sm text-neutral-300'>Cookies Policy</p>
               <p className='text-body-sm text-neutral-300'>
                 Terms & Conditions
               </p>
             </div>
-            <div className=' sm:col-span-4 h-full flex flex-col items-center'>
+            <div className=' sm:col-span-4 flex flex-col items-center'>
               <p className='text-body-lg font-medium'>Follow us</p>
               <p className='text-body-sm text-neutral-300'>LinkedIn</p>
               <p className='text-body-sm text-neutral-300'>Twitter</p>

diff --git a/src/components/metrics.tsx b/src/components/metrics.tsx
@@ -5,28 +5,28 @@ const Metrics = () => {
     <div id='#metrics' className='metrics-container container-border-bottom'>
       <div className='container mx-auto'>
         <div className='flex flex-col relative md:py-20 py-16'>
-          <div className='grid lg:grid-cols-12 md:grid-cols-6 grid-cols-1 xl:gap-8 gap-8 items-center relative'>
-            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
+          <div className='grid lg:grid-cols-12 md:grid-cols-6 grid-cols-1 gap-8 items-center relative'>
+            <div className='lg:col-span-3 md:col-span-3  md:h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
               <h2 className='lg:text-4xl text-display-md font-semibold'>
                 €200 billion
               </h2>
               <p className='text-body-md font-normal text-neutral-600'>
                 Lost annually due to energy inefficiencies
               </p>
             </div>
-            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
+            <div className='lg:col-span-3 md:col-span-3 md:h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
               <h2 className='lg:text-4xl text-display-md font-semibold'>36%</h2>
               <p className='text-body-md font-normal text-neutral-600'>
                 Amount of global energy used by commercial buildings
               </p>
             </div>
-            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
+            <div className='lg:col-span-3 md:col-span-3 md:h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
               <h2 className='lg:text-4xl text-display-md font-semibold'>97</h2>
               <p className='text-body-md font-normal text-neutral-600'>
                 Dedicated Members
               </p>
             </div>
-            <div className='lg:col-span-3 md:col-span-3 h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
+            <div className='lg:col-span-3 md:col-span-3 md:h-full flex flex-col items-start xl:pl-4 lg:pl-4 md:pl-4 pl-4 border-l-2 border-primary-600'>
               <h2 className='lg:text-4xl text-display-md font-semibold'>30%</h2>
               <p className='text-body-md font-normal text-neutral-600'>
                 Of energy consumed by enterprises that is wasted

diff --git a/src/components/powered-by.tsx b/src/components/powered-by.tsx
@@ -24,7 +24,7 @@ const PoweredBy = () => {
             </div>
             <div className='lg:col-span-7 flex flex-col'>
               <div className='grid lg:grid-cols-12 md:grid-cols-12 grid-cols-1 gap-10 items-center relative'>
-                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pl-14'>
+                <div className='lg:col-span-6 relative md:col-span-6 md:h-full flex flex-row pl-14'>
                   <FontAwesomeIcon icon={faSensorCloud} className='icon mr-4' />
                   <div className='text'>
                     <h2 className='lg:text-4xl text-display-xs font-semibold mb-1'>
@@ -35,7 +35,7 @@ const PoweredBy = () => {
                     </p>
                   </div>
                 </div>
-                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pl-14'>
+                <div className='lg:col-span-6 relative md:col-span-6 md:h-full flex flex-row pl-14'>
                   <FontAwesomeIcon icon={faChartMixed} className='icon mr-4' />
                   <div className='text'>
                     <h2 className='lg:text-4xl text-display-xs font-semibold mb-1'>
@@ -47,7 +47,7 @@ const PoweredBy = () => {
                   </div>
                 </div>
 
-                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pl-14'>
+                <div className='lg:col-span-6 relative md:col-span-6 md:h-full flex flex-row pl-14'>
                   <FontAwesomeIcon icon={faPlug} className='icon mr-4' />
                   <div className='text'>
                     <h2 className='lg:text-4xl text-display-xs font-semibold mb-1'>
@@ -59,7 +59,7 @@ const PoweredBy = () => {
                   </div>
                 </div>
 
-                <div className='lg:col-span-6 relative md:col-span-6 h-full flex flex-row pl-14'>
+                <div className='lg:col-span-6 relative md:col-span-6 md:h-full flex flex-row pl-14'>
                   <FontAwesomeIcon icon={faEarthEurope} className='icon mr-4' />
                   <div className='text'>
                     <h2 className='lg:text-4xl text-display-xs font-semibold mb-1'>

diff --git a/src/components/solutions.tsx b/src/components/solutions.tsx
@@ -18,7 +18,7 @@ const Solutions = () => {
             </h2>
           </div>
           <div className='grid lg:grid-cols-12 grid-cols-1 gap-8 items-center relative'>
-            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center'>
+            <div className='lg:col-span-4 md:col-span-4 md:h-full flex flex-col items-center'>
               <FontAwesomeIcon icon={faMeterBolt} className='icon mb-6' />
               <h2 className='lg:text-4xl text-display-xs font-semibold text-center pb-2'>
                 Connect Any Meter
@@ -30,7 +30,7 @@ const Solutions = () => {
                 monitoring.
               </p>
             </div>
-            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center'>
+            <div className='lg:col-span-4 md:col-span-4 md:h-full flex flex-col items-center'>
               <FontAwesomeIcon icon={faRouter} className='icon mb-6' />
               <h2 className='lg:text-4xl text-display-xs font-semibold text-center pb-2'>
                 Advanced Wireless Networks
@@ -42,7 +42,7 @@ const Solutions = () => {
                 operational environments.
               </p>
             </div>
-            <div className='lg:col-span-4 md:col-span-4 h-full flex flex-col items-center'>
+            <div className='lg:col-span-4 md:col-span-4 md:h-full flex flex-col items-center'>
               <FontAwesomeIcon icon={faBrainCircuit} className='icon mb-6' />
               <h2 className='lg:text-4xl text-display-xs font-semibold text-center pb-2'>
                 State-of-the-Art Cloud Analytics