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

188
src/app/globals.css
View File

@@ -25,6 +25,7 @@ html {
--space-section: clamp(40px, 5vw, 64px);
--space-section-lg: clamp(52px, 6vw, 80px);
--space-hero-gap: clamp(36px, 4.5vw, 64px);
--dm-mobile-gutter: 10px;
}
.dm-section {
@@ -460,7 +461,7 @@ body {
@media (max-width: 720px) {
.dm-contact-left {
min-height: auto;
padding: 42px 22px 58px;
padding: 42px 20px 58px;
}
.dm-contact-title {
@@ -478,43 +479,43 @@ body {
}
.dm-contact-card {
margin: 0 16px 32px;
padding: 44px 22px 34px;
border-radius: 24px;
margin: 0 20px 28px;
padding: 28px 20px 24px;
border-radius: 28px;
}
.dm-contact-card h3 {
margin-bottom: 34px;
margin-bottom: 24px;
}
.dm-contact-form {
gap: 20px;
gap: 18px;
}
.dm-contact-form input {
height: 60px;
padding: 0 20px;
height: 56px;
padding: 0 18px;
}
.dm-contact-form textarea {
min-height: 190px;
padding: 20px;
min-height: 170px;
padding: 18px;
}
.dm-contact-submit {
width: 100%;
height: 64px;
height: 60px;
}
.dm-contact-submit span:first-child {
flex: 1 1 auto;
min-width: 0;
padding: 0 22px;
padding: 0 20px;
}
.dm-contact-submit-icon {
width: 64px;
min-width: 64px;
width: 60px;
min-width: 60px;
}
}
@@ -537,7 +538,131 @@ body {
.industry-solutions-grid {
grid-template-columns: 1fr;
}
}.industry-card-link {
.elementor.elementor-61 .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.elementor-61 .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;
}
}
@media (max-width: 767px) {
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
max-width: 100% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-d602f7f,
.elementor.elementor-61 .elementor-element.elementor-element-f64bd88,
.elementor.elementor-61 .elementor-element.elementor-element-5ed2dbb,
.elementor.elementor-61 .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;
}
.elementor.elementor-61 .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;
}
.elementor.elementor-61 .industry-solutions-grid,
.elementor.elementor-61 .industry-card-link {
max-width: 100%;
width: 100%;
min-width: 0;
}
.elementor.elementor-61 .industry-solutions-grid {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 767px) {
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e {
--padding-left: var(--dm-mobile-gutter) !important;
--padding-right: var(--dm-mobile-gutter) !important;
padding-left: var(--dm-mobile-gutter) !important;
padding-right: var(--dm-mobile-gutter) !important;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e > .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;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner > .e-con,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner > .e-con,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner > .e-con,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner > .e-con {
--padding-left: 0px !important;
--padding-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.comparison-section .container {
width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
max-width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.wcd-inner {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
.industry-card-link {
position: relative;
height: 600px;
border-radius: 30px;
@@ -899,12 +1024,14 @@ body {
to 600px at <= 840px. Earlier this card shrank at <= 1536px, which is why the
About hero looked smaller than Home on MacBook M1/Pro (their ~1440-1512px logical
width falls below 1536px). Match the home breakpoint instead. */
@media (max-width: 840px) {
@media (max-width: 1024px) {
.custom-standard-hero-container {
/* No top gap on mobile: the hero card sits flush to the top so the floating
/* No top gap on mobile/tablet: the hero card sits flush to the top so the floating
navbar rests directly on the hero instead of leaving a band above it. */
padding: 0 10px 10px 10px !important;
}
}
@media (max-width: 840px) {
.custom-standard-hero-card {
height: 600px !important;
min-height: 600px !important;
@@ -929,5 +1056,30 @@ body {
.miletruth-hero-container {
margin-top: 0 !important;
}
}
/* Audit & align section rhythm on mobile/tablet across all content pages */
.elementor-86 #women-entrepreneurship.elementor-element-bbc6760,
.elementor-86 .comparison-section,
.elementor-86 .elementor-element.elementor-element-bbc6760:not(#women-entrepreneurship),
.elementor-86 .elementor-element.elementor-element-c2c601a,
.elementor-59 .elementor-element.elementor-element-bbc6760,
.elementor-104 .elementor-element.elementor-element-c70681e {
margin-top: var(--space-section) !important;
margin-bottom: 0 !important;
}
/* Solutions page: First section under Solutions Hero gets the hero gap */
.elementor-59 .elementor-element.elementor-element-3b4a7cc {
margin-top: var(--space-hero-gap) !important;
margin-bottom: 0 !important;
}
/* About page: First section under About Hero gets the hero gap */
.elementor-86 .elementor-element.elementor-element-88745f4:first-of-type {
margin-top: var(--space-hero-gap) !important;
}
/* About page: Subsequent sections get standard section spacing */
.elementor-86 .elementor-element.elementor-element-88745f4 ~ .elementor-element.elementor-element-88745f4 {
margin-top: var(--space-section) !important;
}
}