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

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