fix mobile screen issue

This commit is contained in:
2026-06-06 13:55:33 +05:30
parent 91841ba3f4
commit ab67fec091
20 changed files with 707 additions and 83 deletions

View File

@@ -901,7 +901,9 @@ body {
width falls below 1536px). Match the home breakpoint instead. */
@media (max-width: 840px) {
.custom-standard-hero-container {
padding: 10px 10px 10px 10px !important;
/* No top gap on mobile: 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;
}
.custom-standard-hero-card {
height: 600px !important;
@@ -910,3 +912,22 @@ body {
}
}
/* Consistent flush hero across every page on mobile/tablet — the floating navbar
(position:absolute; top:5px) should rest directly on the hero with no band
above it. Home / How It Works / Solutions share .elementor-element-741f56c;
MileTruth uses .miletruth-hero-container. (About / Contact / Blog already use
.custom-standard-hero-container, handled above.) */
@media (max-width: 1024px) {
/* The e-con applies top padding via the --padding-top / --padding-block-start
vars (site.css sets them to 10px at a higher specificity), so override the
vars — not just padding-top — to actually zero the gap. */
.elementor-element.elementor-element-741f56c {
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding-top: 0 !important;
}
.miletruth-hero-container {
margin-top: 0 !important;
}
}