From 23d91084366df96af46eab72c5afdc0ac7d761ed Mon Sep 17 00:00:00 2001 From: Aravind Date: Tue, 16 Jun 2026 11:53:40 +0530 Subject: [PATCH] fix mobile navaber border --- src/app/globals.css | 75 +++++++++++++++++++ src/components/layout/Header.tsx | 10 ++- src/components/sections/EVLogisticSection.tsx | 16 ++-- src/components/sections/IndexHero.tsx | 1 + 4 files changed, 92 insertions(+), 10 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 068e7e5..942f92b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1039,6 +1039,81 @@ body { } } +/* Mobile hero/header normalization + Home is the reference: at phone width the hero wrapper is full-width with + 10px side gutters, the visible hero card is 370px wide, starts 7px from the + viewport top, and the first section begins immediately after the hero wrapper. + Apply those same computed values to every hero template instead of carrying + separate page-level mobile overrides. */ +@media (max-width: 840px) { + body .elementor .elementor-element.elementor-element-741f56c, + body .custom-standard-hero-container, + body .miletruth-hero .elementor-element.elementor-element-86f3204 { + width: 100% !important; + max-width: 100% !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding: 0 var(--dm-mobile-gutter) var(--dm-mobile-gutter) var(--dm-mobile-gutter) !important; + --padding-top: 0px !important; + --padding-right: var(--dm-mobile-gutter) !important; + --padding-bottom: var(--dm-mobile-gutter) !important; + --padding-left: var(--dm-mobile-gutter) !important; + --padding-block-start: 0px !important; + box-sizing: border-box !important; + border-radius: 0 !important; + overflow: visible !important; + } + + body .elementor .elementor-element.elementor-element-6c7cbcb .owl-stage-outer, + body .custom-standard-hero-card, + body .miletruth-hero .miletruth-hero-container { + width: 100% !important; + height: 600px !important; + min-height: 600px !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + border-radius: 25px !important; + overflow: hidden !important; + box-sizing: border-box !important; + } + + body .elementor .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item, + body .elementor .elementor-element.elementor-element-6c7cbcb .content-item, + body .miletruth-hero .slide-content { + height: 600px !important; + min-height: 600px !important; + } + + body .elementor .elementor-element.elementor-element-741f56c + *, + body .custom-standard-hero-container + *, + body .elementor-63.miletruth-hero + * { + margin-top: 0 !important; + } +} + +@media (max-width: 480px) { + body .elementor .elementor-element.elementor-element-6c7cbcb .owl-stage-outer, + body .custom-standard-hero-card, + body .miletruth-hero .miletruth-hero-container { + height: 520px !important; + min-height: 520px !important; + margin-top: 7px !important; + border-radius: 25px !important; + } + + body .elementor .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item, + body .elementor .elementor-element.elementor-element-6c7cbcb .content-item, + body .miletruth-hero .slide-content { + height: 520px !important; + min-height: 520px !important; + } + + body .miletruth-hero .miletruth-hero-container { + padding-top: 60px !important; + padding-bottom: 60px !important; + } +} + /* Consistent flush hero across every page on mobile/tablet — the floating navbar (position:absolute; top:5px) should rest directly on the hero with no band above it. Home / How It Works / Solutions share .elementor-element-741f56c; diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 787172e..fc885c1 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -800,12 +800,18 @@ export default function Header() { left: 0 !important; right: 0 !important; } + + #masthead .elementor-element.elementor-element-e052838 { + margin-left: 0px !important; + margin-right: 0px !important; + border-radius: 16px !important; + } } @media (max-width: 480px) { #masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img { - width: 130px !important; - margin-left: 10px !important; + width: 150px !important; + margin-left: 8px !important; } } diff --git a/src/components/sections/EVLogisticSection.tsx b/src/components/sections/EVLogisticSection.tsx index 1d498c6..5ac22fc 100644 --- a/src/components/sections/EVLogisticSection.tsx +++ b/src/components/sections/EVLogisticSection.tsx @@ -348,10 +348,10 @@ export default function EVLogisticSection() { @media (max-width: 767px) { .ev-logistic-section { - --padding-left: 10px !important; - --padding-right: 10px !important; - padding-left: 10px !important; - padding-right: 10px !important; + --padding-left: 0px !important; + --padding-right: 0px !important; + padding-left: 0px !important; + padding-right: 0px !important; box-sizing: border-box !important; } @@ -366,10 +366,10 @@ export default function EVLogisticSection() { } .ev-logistic-section .elementor-element-343b363 { - --padding-left: 0px !important; - --padding-right: 0px !important; - padding-left: 0 !important; - padding-right: 0 !important; + --padding-left: 20px !important; + --padding-right: 20px !important; + padding-left: 20px !important; + padding-right: 20px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; diff --git a/src/components/sections/IndexHero.tsx b/src/components/sections/IndexHero.tsx index 9fd8bdd..f95bf45 100644 --- a/src/components/sections/IndexHero.tsx +++ b/src/components/sections/IndexHero.tsx @@ -121,6 +121,7 @@ export default function IndexHero() { @media (max-width: 480px) { .logico-content-slider-widget .owl-stage-outer { height: 520px !important; + margin-top: 7px !important; } }