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

fix mobile screen issue

Browse Source
This commit is contained in:
Aravind R
2026-06-06 13:55:33 +05:30
parent 91841ba3f4
commit ab67fec091
20 changed files with 707 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -179,6 +179,21 @@ export default function WomenSection() {
white-space: nowrap !important;
}
/* The banner image (bg-header-women.png) is very wide (≈2.48:1) and the
woman — the subject of this section — sits on the right. On narrow
screens "cover" center-crops her out, so shift the focal point right
to keep her face in frame. */
@media (max-width: 1024px) {
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
background-position: 78% center !important;
}
}
@media (max-width: 600px) {
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
background-position: 82% center !important;
}
}
/* Stack the two columns below the desktop breakpoint so the box group
always gets full width and stays centered — never clipped. */
@media (max-width: 1024px) {
@@ -187,11 +202,46 @@ export default function WomenSection() {
}
.elementor-element.elementor-element-2ed47f3 { grid-template-columns: 1fr !important; }
#ws-stories { max-width: 640px; margin: 0 auto; }
/* Align the heading, image and stats/cards to one shared left/right
edge — the heading + image widgets carried extra inset that left
them staggered (80px / 70px / 60px) against the stats column. */
#women-entrepreneurship .elementor-element-36efec7,
#women-entrepreneurship .elementor-element-b2c956f {
padding-left: 0 !important;
padding-right: 0 !important;
}
#women-entrepreneurship .elementor-element-778840d,
#women-entrepreneurship .elementor-element-bbfb67f,
#women-entrepreneurship .elementor-element-778840d > .elementor-widget-container,
#women-entrepreneurship .elementor-element-bbfb67f > .elementor-widget-container {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 600px) {
#ws-stories .ws__stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
#ws-stories .ws__stat { padding: 14px 10px; }
#ws-stories .ws__stat-label { font-size: 11px !important; letter-spacing: 0.02em; }
/* 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
three cramped columns. */
#ws-stories .ws__stats { grid-template-columns: 1fr; gap: 12px; }
#ws-stories .ws__stat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
min-width: 0;
}
#ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
#ws-stories .ws__stat-label {
margin-top: 0;
font-size: 13px !important;
letter-spacing: 0.02em;
text-align: right;
min-height: 0;
}
#ws-stories .ws__cards { grid-template-columns: 1fr; }
}
`}} />