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

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

@@ -116,6 +116,14 @@ export default function MileTruthHero() {
padding: 0 40px !important;
box-sizing: border-box !important;
}
.miletruth-hero .slide-content,
.miletruth-hero .slide-content-inner {
/* These carry inherited 20px padding from the slider theme with
content-box sizing, so width:100% + padding overflowed the viewport
by ~40px and pushed the hero off-center. Force border-box so the
padding is contained and the block stays centered. */
box-sizing: border-box !important;
}
.miletruth-hero .slide-content-inner {
display: flex !important;
flex-direction: column !important;
@@ -284,17 +292,33 @@ export default function MileTruthHero() {
.miletruth-hero .elementor-element-86f3204 {
padding: 0 12px;
}
/* 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;
}
.miletruth-hero .slide-content {
padding: 0 !important;
}
.miletruth-hero .elementor-element-8e5c81e {
padding: 30px 0 !important;
border-radius: 20px !important;
}
.miletruth-hero .elementor-element-8e5c81e > .e-con-inner {
padding: 0 20px !important;
}
.miletruth-hero .elementor-element-628123a {
grid-template-columns: 1fr !important;
gap: 36px !important;
}
.miletruth-hero .content-slider-item-heading,
.miletruth-hero .content-slider-item-heading .heading-content {
font-size: 32px !important;
font-size: clamp(26px, 8vw, 32px) !important;
letter-spacing: -0.5px !important;
/* never let a single long word push past the viewport */
overflow-wrap: break-word;
word-break: break-word;
}
}
`}} />