Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix mobile view issue

Browse Source
This commit is contained in:
Aravind R
2026-06-15 18:20:48 +05:30
parent 205924e057
commit 0560b86b87
25 changed files with 956 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/sections/AboutCTA.tsx
View File

@@ -3,7 +3,31 @@ import Link from "next/link";
export default function AboutCTA() {
return (
<div className="we-container">
<>
<style dangerouslySetInnerHTML={{ __html: `
@media (max-width: 768px) {
.we-container {
margin-top: 40px !important;
margin-bottom: 40px !important;
padding: 0 10px !important;
}
.we-cta {
padding: 48px 20px !important;
border-radius: 22px !important;
}
.we-cta-title {
font-size: clamp(28px, 6vw, 38px) !important;
line-height: 1.25 !important;
margin-bottom: 16px !important;
}
.we-cta-sub {
font-size: 15px !important;
line-height: 1.5 !important;
margin-bottom: 24px !important;
}
}
`}} />
<div className="we-container">
<div className="we-cta reveal">
<div className="we-cta-inner">
<h2 className="we-cta-title">
@@ -26,5 +50,6 @@ export default function AboutCTA() {
</div>
</div>
</div>
</>
);
}

2
src/components/sections/AboutHero.tsx
View File

@@ -9,7 +9,7 @@ export default function AboutHero() {
width: 100% !important;
text-align: center !important;
color: #fff !important;
padding: 40px !important;
padding: 0 15px !important;
z-index: 2;
display: flex !important;
flex-direction: column !important;

33
src/components/sections/BlogGrid.tsx
View File

@@ -26,9 +26,40 @@ export default function BlogGrid() {
}
}
@media (max-width: 768px) {
.elementor-104 .elementor-element.elementor-element-c70681e {
margin-top: var(--space-section) !important;
margin-bottom: 16px !important;
}
.custom-blog-grid {
grid-template-columns: 1fr !important;
gap: 48px !important;
gap: 28px !important;
padding: 24px 20px !important;
}
}
@media (max-width: 767px) {
.elementor-104 .elementor-element.elementor-element-c70681e {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.elementor-104 .elementor-element.elementor-element-3dec5cf {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-104 .elementor-element.elementor-element-aa12479,
.elementor-104 .elementor-element.elementor-element-aa12479 > .elementor-widget-container,
.elementor-104 .archive-listing,
.elementor-104 .custom-blog-grid {
width: 100% !important;
max-width: 100% !important;
}
.elementor-104 .custom-blog-grid {
padding-left: 0 !important;
padding-right: 0 !important;
}
}

6
src/components/sections/BlogPostFooter.tsx
View File

@@ -147,6 +147,12 @@ const STYLES = `
padding: clamp(24px, 3vw, 32px) clamp(20px, 4vw, 40px) clamp(8px, 1.5vw, 16px);
display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px);
}
@media (max-width: 767px) {
.dm-blog-footer-inner {
padding-left: 16px;
padding-right: 16px;
}
}
/* Prev / Next */
.dm-prevnext {

15
src/components/sections/BlogsHero.tsx
View File

@@ -15,6 +15,19 @@ export default function BlogsHero() {
letter-spacing: -1.5px !important;
margin: 0 !important;
}
.blogs-hero-content {
position: relative !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
`}} />
<div className="custom-standard-hero-container">
<div
@@ -26,7 +39,7 @@ export default function BlogsHero() {
}}
className="custom-standard-hero-card"
>
<div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
<div className="blogs-hero-content">
{/* Title / Heading for Blogs */}
<div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>

6
src/components/sections/CompetitiveEdge.tsx
View File

@@ -492,7 +492,11 @@ export default function CompetitiveEdge() {
@media (max-width: 768px) {
.comparison-section {
padding: 80px 0;
padding: 56px 0;
}
.comparison-section .container {
padding: 0 10px;
}
.moat-heading {

45
src/components/sections/ConnectedLogistics.tsx
View File

@@ -86,9 +86,20 @@ export default function ConnectedLogistics() {
padding-right: 0 !important;
}
/* Force ScrollReveal wrapper div to span full width */
.elementor-element-96343ba > div {
width: 100% !important;
height: auto !important;
}
/* Show image at the bottom or top depending on order */
.elementor-element-96343ba {
margin-top: 30px !important;
margin-top: 0px !important;
}
/* Reduce padding bottom of the content section on tablet */
.elementor-element-71c3e1d {
padding-bottom: 24px !important;
}
/* Override desktop fixed widths on mobile/tablet */
@@ -98,27 +109,49 @@ export default function ConnectedLogistics() {
max-width: 100% !important;
}
/* Tablet overrides: ~15% smaller than site.css's 450px with centered layout */
/* Allow widget container to take 100% width on mobile/tablet */
.elementor-element-99768ba {
width: 100% !important;
max-width: 100% !important;
}
/* Tablet overrides */
.elementor-element-99768ba .elementor-widget-container {
padding: 30px !important;
padding: 10px !important;
display: block !important; /* Disable flex centering layout on mobile/tablet */
width: 100% !important;
}
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important;
max-width: 382px !important;
max-width: 600px !important; /* allow up to 600px on tablet */
border-radius: 25px !important; /* Explicitly keep 25px */
}
}
@media (max-width: 767px) {
/* Mobile overrides: ~15% smaller than site.css's 90% with 10% identical padding on all 4 sides */
/* Mobile overrides: let container take 100% width and image fill it */
.elementor-element-99768ba {
width: 100% !important;
max-width: 100% !important;
}
/* Eliminate extra gap under the content column on mobile */
.elementor-element-71c3e1d {
padding-bottom: 12px !important;
}
.elementor-element-99768ba .elementor-widget-container {
padding: 10% !important;
padding: 0px !important; /* Eliminate padding to maximize image width/height */
display: block !important; /* Disable flex centering layout on mobile/tablet */
width: 100% !important;
}
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
border-radius: 25px !important; /* Explicitly keep 25px */
}
}

53
src/components/sections/EVLogisticSection.tsx
View File

@@ -346,10 +346,57 @@ export default function EVLogisticSection() {
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.ev-logistic-section {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
.ev-logistic-section > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.ev-logistic-section .elementor-element-343b363 {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.ev-logistic-body-grid {
width: 100% !important;
max-width: 100% !important;
align-items: stretch !important;
}
.ev-logistic-content-col {
width: 100% !important;
max-width: 100% !important;
align-self: center !important;
}
.ev-feature-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
}
.ev-feature-card {
width: 100% !important;
max-width: 100% !important;
}
}
`}} />
@@ -368,7 +415,7 @@ export default function EVLogisticSection() {
<div className="ev-logistic-header">
<div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading ev-logistic-kicker-widget" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div className="elementor-widget-container">
<div className="logico-title ev-logistic-kicker">/ Build Electric Vehicles /</div>
<div className="logico-title ev-logistic-kicker">/ Built for Electric Vehicles /</div>
</div>
</div>
<div className="ev-logistic-title-wrapper">
@@ -382,7 +429,7 @@ export default function EVLogisticSection() {
fontWeight: 800,
}}
>
LOGISTICS BUILT FOR ELECTRIC VEHICLES
Logistics Built for EV Vehicles
</div>
</div>
</div>

113
src/components/sections/EVSection.tsx
View File

@@ -390,6 +390,7 @@ export default function EVSection({
const outerClass =
"elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" +
(useDashboard ? " evnd-workflow-shell" : "") +
(gapTop ? " evnd-gap-top" : "") +
(gapBottom ? " evnd-gap-bottom" : "");
@@ -1057,9 +1058,47 @@ export default function EVSection({
.evnd__dash-kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
.elementor.elementor-61 .elementor-element.elementor-element-bbc6760,
.elementor-element.elementor-element-bbc6760.evnd-workflow-shell {
width: calc(100% - 20px) !important;
margin-left: 10px !important;
margin-right: 10px !important;
padding-left: 0px !important;
padding-right: 0px !important;
box-sizing: border-box !important;
}
.evnd-gap-top { margin-top: 24px !important; }
.evnd-gap-bottom { margin-bottom: 24px !important; }
.evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 24px 0; margin-top: 24px; }
.evnd { padding-inline: 0; }
.evnd__heading {
padding-left: 26px;
padding-right: 26px;
box-sizing: border-box;
margin-bottom: 28px;
display: flow-root;
}
.evnd__inner {
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
}
.evnd__dash {
padding-left: 12px !important;
padding-right: 12px !important;
}
.evnd__bar {
grid-template-columns: repeat(2, 1fr);
gap: 24px 0;
width: calc(100% - 8px);
max-width: calc(100% - 8px);
margin: 32px auto 0;
padding: 24px 0;
box-sizing: border-box;
}
.evnd.evnd--cards {
padding-bottom: 20px;
margin-bottom: 0;
}
.evnd__bar-item:nth-child(even)::after { display: none; }
.evnd__bar-item:nth-child(2)::after { display: none; }
.evnd__bar-item { padding: 12px 16px; }
@@ -1080,12 +1119,66 @@ export default function EVSection({
.evnd__grid--cards .evnd__left,
.evnd__grid--cards .evnd__right,
.evnd__grid--cards .evnd__media,
.evnd__grid--cards .evnd__dash { min-width: 0; }
.evnd__grid--cards .evnd__dash {
min-width: 0;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Keep the KPI row a tidy 2x2 on phones. */
.evnd__dash-kpis { grid-template-columns: repeat(2, 1fr); }
/* Workflow feature cards: distribute content like the Women stats
rows so the icon balances the right side instead of everything
clustering at the left edge. */
.evnd-workflow-shell .evnd__dash-feats { gap: 10px; }
.evnd-workflow-shell .evnd__dfeat {
grid-template-columns: minmax(0, 1fr) 36px;
gap: 12px;
padding: 12px 14px;
}
.evnd-workflow-shell .evnd__dfeat-ico {
grid-column: 2;
grid-row: 1;
justify-self: end;
width: 36px;
height: 36px;
}
.evnd-workflow-shell .evnd__dfeat-body {
grid-column: 1;
grid-row: 1;
}
/* ---- Mobile-only overrides for Hero Image & EV Logistics Card ---- */
.elementor-element.elementor-element-7da6646 {
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
border-radius: 18px !important;
margin-top: 15px !important;
margin-bottom: -50px !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-8b5d6e6 {
padding-left: 8px !important;
padding-right: 8px !important;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-1f766ea {
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 480px) {
.evnd { padding: 40px 16px 48px; }
.evnd { padding-inline: 0; }
.evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 18px 0; padding: 22px 0; }
.evnd__bar-item { padding: 10px 12px; gap: 8px; }
.evnd__bar-val { font-size: clamp(26px, 9vw, 34px); }
@@ -1104,13 +1197,13 @@ export default function EVSection({
.evnd-feature__arrow { position: absolute; top: 16px; right: 16px; margin: 0; }
/* ---- Compact dashboard (phones) ---- */
.evnd__dash { padding: 18px; gap: 14px; }
.evnd__dash { padding-top: 18px !important; padding-bottom: 18px !important; gap: 14px; }
.evnd__dash-sys { display: none; }
.evnd__dash-kpis { gap: 10px; }
.evnd__kpi { padding: 12px 14px; gap: 4px; }
.evnd__kpi-val { font-size: clamp(24px, 8vw, 30px); }
.evnd__kpi-label { font-size: 12px; }
.evnd__dfeat { padding: 12px 14px; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
.evnd-workflow-shell .evnd__dfeat { padding: 11px 12px; gap: 10px; grid-template-columns: minmax(0, 1fr) 34px; }
.evnd__dfeat-ico { width: 34px; height: 34px; border-radius: 9px; }
.evnd__dfeat-ico svg { width: 17px; height: 17px; }
.evnd__dfeat-title { font-size: 13.5px; }
@@ -1241,11 +1334,13 @@ export default function EVSection({
useDashboard && !mediaSlot ? " evnd__inner--img" : ""
}`}
>
<span className="evnd__eyebrow">{eyebrow}</span>
<h2 className="evnd__title">
{titleLead}
<span className="accent">{titleAccent}</span>
</h2>
<div className="evnd__heading">
<span className="evnd__eyebrow">{eyebrow}</span>
<h2 className="evnd__title">
{titleLead}
<span className="accent">{titleAccent}</span>
</h2>
</div>
{/* MAIN GRID */}
<div

27
src/components/sections/HowItWorksHero.tsx
View File

@@ -47,7 +47,7 @@ export default function HowItWorksHero() {
text-align: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 40px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
@@ -73,6 +73,8 @@ export default function HowItWorksHero() {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
@@ -86,6 +88,8 @@ export default function HowItWorksHero() {
text-align: center !important;
max-width: 820px !important;
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Larger, more readable hero subtitle on large/4K screens */
@@ -109,10 +113,13 @@ export default function HowItWorksHero() {
@media (max-width: 1024px) {
.elementor-element.elementor-element-741f56c {
width: calc(100% - 40px) !important;
max-width: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
overflow: hidden !important;
border-radius: 25px !important;
}
@@ -134,15 +141,19 @@ export default function HowItWorksHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content {
width: 100% !important;
min-height: 620px !important;
padding-left: 48px !important;
padding-right: 48px !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
@media (max-width: 767px) {
.elementor-element.elementor-element-741f56c {
width: calc(100% - 24px) !important;
width: 100% !important;
max-width: 100% !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
border-radius: 22px !important;
}
@@ -162,8 +173,8 @@ export default function HowItWorksHero() {
asymmetric top margin). */
.elementor .elementor-element.elementor-element-6c7cbcb .slide-content {
min-height: 560px !important;
padding-left: 22px !important;
padding-right: 22px !important;
padding-left: 0 !important;
padding-right: 0 !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;

63
src/components/sections/IndustrySolutions.tsx
View File

@@ -5,6 +5,66 @@ import { ScrollReveal } from "@/animations/Reveal";
export default function IndustrySolutions() {
return (
<>
<style dangerouslySetInnerHTML={{ __html: `
@media (max-width: 768px) {
.elementor-element.elementor-element-3b4a7cc {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-3b4a7cc > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-element.elementor-element-d602f7f,
.elementor-element.elementor-element-f64bd88,
.elementor-element.elementor-element-5ed2dbb,
.elementor-element.elementor-element-6829276 {
--padding-left: 0px !important;
--padding-right: 0px !important;
--margin-left: 0px !important;
--margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-6829276 {
--e-con-grid-template-columns: minmax(0, 1fr) !important;
--grid-justify-content: stretch !important;
--justify-items: stretch !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
justify-items: stretch !important;
min-width: 0 !important;
}
.industry-solutions-grid,
.industry-card-link {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.industry-solutions-grid {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
`}} />
<div className="elementor-element elementor-element-3b4a7cc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="3b4a7cc" data-element_type="container" data-e-type="container">
<div className="e-con-inner">
<div className="elementor-element elementor-element-d602f7f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d602f7f" data-element_type="container" data-e-type="container">
@@ -278,6 +338,7 @@ export default function IndustrySolutions() {
</div>
</div>
</div>
</div>
</div>
</>
);
}

2
src/components/sections/IndustryStack.tsx
View File

@@ -306,7 +306,7 @@ const CSS = `
#ind-stack .istk__content { max-width: none; }
}
@media (max-width: 600px) {
#ind-stack .istk { padding: 10px 14px; }
#ind-stack .istk { padding: 10px; }
#ind-stack .istk__card { padding: 22px 20px; border-radius: 24px; }
#ind-stack .istk__media { height: 240px; }
#ind-stack .istk__title { margin-bottom: 16px !important; }

16
src/components/sections/IntelligenceGrid.tsx
View File

@@ -234,7 +234,7 @@ export default function IntelligenceGrid() {
return (
<div
ref={containerRef}
className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent"
className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent intelligence-grid-section"
data-id="bbc6760"
data-element_type="container"
data-e-type="container"
@@ -710,11 +710,19 @@ export default function IntelligenceGrid() {
}
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.intelligence-grid-section {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.roadmap-hero-section {
width: calc(100% - 24px); /* tighter 12px gutter so the band reads edge-to-edge on phones */
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
padding: 52px 16px 44px;
border-radius: 22px;
border-radius: 22px !important;
}
.vision-main-subtitle { margin-bottom: 40px !important; }

19
src/components/sections/MileTruthHero.tsx
View File

@@ -69,7 +69,7 @@ export default function MileTruthHero() {
justify-content: center;
border-radius: 25px 25px 0 0;
margin-top: 20px;
padding: 100px 40px;
padding: 100px 0;
}
.miletruth-hero-container::before {
display: none !important;
@@ -78,7 +78,7 @@ export default function MileTruthHero() {
position: relative;
z-index: 2;
width: 100%;
padding: 0 40px !important;
padding: 0 !important;
box-sizing: border-box;
}
.miletruth-hero .content-slider-item-heading,
@@ -114,7 +114,7 @@ export default function MileTruthHero() {
text-align: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 40px !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
.miletruth-hero .slide-content,
@@ -258,9 +258,12 @@ export default function MileTruthHero() {
}
}
@media (max-width: 1024px) {
.miletruth-hero .elementor-element-86f3204 {
padding: 0 10px !important;
}
.miletruth-hero-container {
min-height: 600px;
padding: 120px 0;
padding: 80px 0 !important;
}
.miletruth-hero .elementor-element-8e5c81e {
padding: 40px 0 !important;
@@ -288,19 +291,19 @@ export default function MileTruthHero() {
@media (max-width: 580px) {
.miletruth-hero-container {
min-height: 500px;
padding: 100px 0;
padding: 60px 0 !important;
}
.miletruth-hero .elementor-element-86f3204 {
padding: 0 12px;
padding: 0 10px !important;
}
/* Collapse the nested horizontal padding (was 40px + 40px on top of the
12px wrapper) — at 320px that left only ~136px for text and the long
heading words overflowed, causing horizontal scroll + off-center look. */
.miletruth-content {
padding: 0 14px !important;
padding: 0 !important;
}
.miletruth-hero .slide-content {
padding: 0 !important;
padding: 0 15px !important;
}
.miletruth-hero .elementor-element-8e5c81e {
padding: 30px 0 !important;

29
src/components/sections/OurTeam.tsx
View File

@@ -87,8 +87,35 @@ export default function OurTeam() {
@media (max-width: 800px) {
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 50%; }
}
@media (max-width: 767px) {
.elementor-86 .elementor-element-c2c601a > .e-con-inner {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.elementor-86 .elementor-element-c46350e > .elementor-widget-container {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.team-listing-wrapper.team-grid-listing {
margin: 0 0 -28px;
}
.team-listing-wrapper.team-grid-listing .team-item-wrapper {
width: 100%;
padding: 0;
margin-bottom: 28px;
}
}
@media (max-width: 480px) {
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 100%; }
.team-listing-wrapper.team-grid-listing {
margin: 0 0 -28px;
}
.team-listing-wrapper.team-grid-listing .team-item-wrapper {
width: 100%;
padding: 0;
margin-bottom: 28px;
}
}
/* Card: photo on top, name/position at the bottom (down to image). */

6
src/components/sections/SingleBlog.tsx
View File

@@ -227,6 +227,12 @@ const STYLES = `
/* 20px mobile padding floor → 40px on desktop; matches the footer container. */
padding: clamp(14px, 2vw, 26px) clamp(20px, 4vw, 40px) 0;
}
@media (max-width: 767px) {
.dm-blog-wrap {
padding-left: 16px;
padding-right: 16px;
}
}
/* ── Article meta bar (directly under the hero) ── */
.dm-meta-bar {

29
src/components/sections/SolutionsHero.tsx
View File

@@ -45,7 +45,7 @@ export default function SolutionsHero() {
text-align: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 40px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
@@ -71,6 +71,8 @@ export default function SolutionsHero() {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
@@ -84,6 +86,8 @@ export default function SolutionsHero() {
text-align: center !important;
max-width: 820px !important;
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Larger, more readable hero subtitle on large/4K screens */
@@ -107,10 +111,13 @@ export default function SolutionsHero() {
@media (max-width: 1024px) {
.elementor-element.elementor-element-741f56c {
width: calc(100% - 40px) !important;
max-width: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
overflow: hidden !important;
border-radius: 25px !important;
}
@@ -132,15 +139,19 @@ export default function SolutionsHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content {
width: 100% !important;
min-height: 620px !important;
padding-left: 48px !important;
padding-right: 48px !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
@media (max-width: 767px) {
.elementor-element.elementor-element-741f56c {
width: calc(100% - 24px) !important;
width: 100% !important;
max-width: 100% !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
border-radius: 22px !important;
}
@@ -156,8 +167,8 @@ export default function SolutionsHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content {
min-height: 560px !important;
padding-left: 22px !important;
padding-right: 22px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
@@ -165,6 +176,8 @@ export default function SolutionsHero() {
font-size: clamp(38px, 11vw, 48px) !important;
line-height: 1.05 !important;
overflow-wrap: break-word !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the

8
src/components/sections/WhyChooseDoormile.tsx
View File

@@ -315,15 +315,15 @@ export default function WhyChooseDoormile() {
}
@media (max-width: 1020px) {
.wcd-section { margin: 0 15px 15px 15px; padding: 40px 0 80px; }
.wcd-inner { padding: 0 30px; }
.wcd-section { margin: 0 10px 10px 10px; padding: 40px 0 80px; }
.wcd-inner { padding: 0; }
.wcd-grid { grid-template-columns: 1fr; gap: 24px; }
.wcd-card-body { padding: 32px; }
.logico-front-end .wcd-section h3.wcd-card-title { font-size: 24px; }
}
@media (max-width: 480px) {
.wcd-section { margin: 0 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
.wcd-inner { padding: 0 20px; }
.wcd-section { margin: 0 10px 10px 10px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
.wcd-inner { padding: 0; }
.wcd-card-body { padding: 24px; }
}
`}} />

146
src/components/sections/WomenSection.tsx
View File

@@ -179,6 +179,41 @@ export default function WomenSection() {
font-weight: 500;
}
/* ---- Floating card sizing: content-driven, not container-driven ----
Matches the EV Logistics card height proportions exactly by trimming
red content padding and white footer min-height. */
.elementor-element.elementor-element-3b61435 {
--padding-top: 46px;
--padding-bottom: 38px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 38px;
--padding-top: 14px;
--padding-bottom: 14px;
}
@media (max-width: 1020px) {
.elementor-element.elementor-element-3b61435 {
--padding-top: 34px;
--padding-bottom: 28px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 32px;
--padding-top: 12px;
--padding-bottom: 12px;
}
}
@media (max-width: 660px) {
.elementor-element.elementor-element-3b61435 {
--padding-top: 26px;
--padding-bottom: 22px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 24px;
--padding-top: 10px;
--padding-bottom: 10px;
}
}
.elementor-element-778840d .logico-title {
white-space: nowrap !important;
}
@@ -192,9 +227,9 @@ export default function WomenSection() {
background-position: 78% center !important;
}
}
@media (max-width: 600px) {
@media (max-width: 767px) {
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
background-position: 82% center !important;
background-position: 82% 25% !important;
}
}
@@ -224,7 +259,108 @@ export default function WomenSection() {
margin-right: 0 !important;
}
}
@media (max-width: 600px) {
@media (max-width: 767px) {
#women-entrepreneurship {
width: calc(100% - 20px) !important;
margin-left: 10px !important;
margin-right: 10px !important;
border-radius: 22px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
#women-entrepreneurship .e-con-boxed > .e-con-inner {
padding-top: 32px !important;
padding-bottom: 32px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#women-entrepreneurship .elementor-element-8b5d6e6,
#women-entrepreneurship .elementor-element-b6e14bd,
#women-entrepreneurship .elementor-element-90cc867,
#women-entrepreneurship .elementor-element-36efec7,
#women-entrepreneurship .elementor-element-b2c956f {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#women-entrepreneurship .elementor-element-1f766ea {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#women-entrepreneurship .elementor-element.elementor-element-2ed47f3 {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
gap: 24px !important;
}
#women-entrepreneurship .elementor-element-36efec7 {
margin-top: 0px !important;
padding-top: 0px !important;
gap: 0px !important;
}
#women-entrepreneurship .elementor-element-24c0280 {
margin-bottom: 0px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-778840d {
margin-top: 14px !important;
margin-bottom: 14px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-778840d h3.logico-title,
#women-entrepreneurship .elementor-element-778840d > .elementor-widget-container {
margin: 0px !important;
padding: 0px !important;
}
#women-entrepreneurship .elementor-element-7da6646 {
width: calc(100% - 28px) !important;
margin-left: 14px !important;
margin-right: 14px !important;
border-radius: 18px !important;
min-height: 240px !important;
margin-top: 15px !important;
margin-bottom: -50px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-8b5d6e6 {
padding-left: 14px !important;
padding-right: 14px !important;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-bbfb67f img {
width: 100% !important;
}
#women-entrepreneurship .elementor-element-bbfb67f {
margin-top: 0px !important;
margin-bottom: 16px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#ws-stories {
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
/* KPI stat cards stack one-per-row on mobile. Inside each card the big
number sits on the left and the label on the right, vertically
centered, so every stat reads as a clean full-width row instead of
@@ -235,7 +371,7 @@ export default function WomenSection() {
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
padding: 16px 20px;
min-width: 0;
}
#ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
@@ -246,7 +382,7 @@ export default function WomenSection() {
text-align: right;
min-height: 0;
}
#ws-stories .ws__cards { grid-template-columns: 1fr; }
#ws-stories .ws__cards { grid-template-columns: 1fr; gap: 12px; }
}
`}} />