fix mobile screen issue
This commit is contained in:
@@ -130,7 +130,12 @@ export default function Footer() {
|
||||
<div className="elementor-element elementor-element-df89993 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="df89993" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-69b6892 elementor-widget elementor-widget-logico_heading" data-id="69b6892" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Call Center</div>
|
||||
<div className="logico-title dm-foot-label">
|
||||
<svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
|
||||
</svg>
|
||||
<span>Call Center</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-87be926 elementor-widget elementor-widget-text-editor" data-id="87be926" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
@@ -142,7 +147,13 @@ export default function Footer() {
|
||||
<div className="elementor-element elementor-element-f5d8e63 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f5d8e63" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-774e540 elementor-widget elementor-widget-logico_heading" data-id="774e540" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Our Location</div>
|
||||
<div className="logico-title dm-foot-label">
|
||||
<svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
<span>Our Location</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-9c1cf03 elementor-widget elementor-widget-text-editor" data-id="9c1cf03" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
@@ -158,7 +169,13 @@ export default function Footer() {
|
||||
<div className="elementor-element elementor-element-a96d151 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a96d151" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-37e647f elementor-widget elementor-widget-logico_heading" data-id="37e647f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Email</div>
|
||||
<div className="logico-title dm-foot-label">
|
||||
<svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<rect x="2" y="4" width="20" height="16" rx="2" />
|
||||
<path d="m22 7-10 5L2 7" />
|
||||
</svg>
|
||||
<span>Email</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-ba67644 elementor-widget elementor-widget-text-editor" data-id="ba67644" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
@@ -172,7 +189,16 @@ export default function Footer() {
|
||||
<div className="elementor-element elementor-element-9ba4b82 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ba4b82" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-e9a5d79 elementor-widget elementor-widget-logico_heading" data-id="e9a5d79" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Social network</div>
|
||||
<div className="logico-title dm-foot-label">
|
||||
<svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<circle cx="18" cy="5" r="3" />
|
||||
<circle cx="6" cy="12" r="3" />
|
||||
<circle cx="18" cy="19" r="3" />
|
||||
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
|
||||
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
|
||||
</svg>
|
||||
<span>Social network</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-a6bccba elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="a6bccba" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
|
||||
@@ -521,6 +547,97 @@ export default function Footer() {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
/* Compact footer link columns on phones (<=480px). The kit only sets
|
||||
column --width at min-width:481px, so below that all four blocks
|
||||
fall back to 100% and stack into one very tall column. Put the
|
||||
logo+social full-width on top, then lay the three link groups out
|
||||
in a 2-up grid (matching the tablet 47% intent) so the footer is
|
||||
roughly half as tall. */
|
||||
/* Inline icon beside each contact label (Call Center / Our Location /
|
||||
Email / Social network). */
|
||||
.elementor-6585 .dm-foot-label {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.elementor-6585 .dm-foot-label .dm-foot-ic {
|
||||
flex: 0 0 auto;
|
||||
color: #C01227;
|
||||
}
|
||||
|
||||
/* ── Compact mobile contact footer (<=600px) ──
|
||||
On phones the upper contact section stacked into one very tall
|
||||
column with 50px margins between every block. Tighten the heading,
|
||||
collapse those stack margins, and pair Email + Social side-by-side
|
||||
(both are short) so the footer is far shorter without losing the
|
||||
full-width address readability. */
|
||||
@media (max-width: 600px) {
|
||||
/* Trim the band's oversized top/bottom padding on phones. */
|
||||
.elementor-6585 .elementor-element.elementor-element-b29b8fc > .e-con-inner {
|
||||
padding-top: 40px !important;
|
||||
padding-bottom: 40px !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-687d944 .logico-title {
|
||||
font-size: clamp(24px, 6.6vw, 32px) !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
.elementor-6585 .dm-foot-label .dm-foot-ic { width: 14px; height: 14px; }
|
||||
/* The Call Center / Our Location group carries a 10px side padding
|
||||
the Email / Social group doesn't, leaving its labels indented
|
||||
10px out of line with everything else — zero it so all four
|
||||
contact blocks share the same left edge as the heading. */
|
||||
.elementor-6585 .elementor-element.elementor-element-2631b42 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
/* All four contact blocks stack in one left-aligned column with a
|
||||
consistent gap (Social network sits below Email). */
|
||||
.elementor-6585 .elementor-element.elementor-element-2631b42,
|
||||
.elementor-6585 .elementor-element.elementor-element-f5d8e63,
|
||||
.elementor-6585 .elementor-element.elementor-element-645be8d,
|
||||
.elementor-6585 .elementor-element.elementor-element-9ba4b82 {
|
||||
margin-top: 22px !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-645be8d > .e-con-inner {
|
||||
flex-direction: column !important;
|
||||
gap: 0 !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-a96d151,
|
||||
.elementor-6585 .elementor-element.elementor-element-9ba4b82 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.elementor-6585 .elementor-element.elementor-element-3f1ba7a {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 36px 16px !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-64e2e81 {
|
||||
flex: 0 0 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-5b73dd3,
|
||||
.elementor-6585 .elementor-element.elementor-element-451f15c,
|
||||
.elementor-6585 .elementor-element.elementor-element-44a1f5d {
|
||||
flex: 1 1 calc(50% - 8px) !important;
|
||||
width: calc(50% - 8px) !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
/* Allow long links (e.g. "Women entrepreneurship") to wrap inside
|
||||
the narrow columns instead of overflowing. */
|
||||
.elementor-6585 .logico-custom-menu-widget li a {
|
||||
white-space: normal !important;
|
||||
}
|
||||
/* Trim the large social-icons top gap so the brand block stays tight. */
|
||||
.elementor-6585 .elementor-element.elementor-element-e4e6486 > .elementor-widget-container {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -550,6 +550,17 @@ export default function Header() {
|
||||
#masthead .menu-trigger {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Sticky header on scroll for mobile/tablet too — the desktop
|
||||
rule lived only in the min-width:1025px block, so on phones the
|
||||
absolutely-positioned navbar scrolled away with the page. Pin it
|
||||
to the top once scrolled past 50px, matching desktop behaviour. */
|
||||
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -571,6 +582,34 @@ export default function Header() {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* The bundled 'fontello' subset is missing the search (\\e85c) and
|
||||
close (\\e845) glyphs, so those two icons render as empty tofu
|
||||
boxes. Replace them with inline SVGs via CSS masks so they paint
|
||||
in the current text colour (matching the working cart/user icons)
|
||||
and respond to hover. */
|
||||
#masthead .header-icon.search-link .search-trigger-icon::before,
|
||||
#masthead .header-icon.menu-close .menu-close-icon::before {
|
||||
content: "" !important;
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
}
|
||||
#masthead .header-icon.search-link .search-trigger-icon::before {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
|
||||
}
|
||||
#masthead .header-icon.menu-close .menu-close-icon::before {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -79,11 +79,10 @@ export default function LoadingScreen() {
|
||||
<Image
|
||||
src="/images/preloader.png"
|
||||
alt="Doormile"
|
||||
width={200}
|
||||
height={38}
|
||||
width={325}
|
||||
height={239}
|
||||
priority
|
||||
className="dm-loader__logo"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -100,8 +99,8 @@ export default function LoadingScreen() {
|
||||
will-change: opacity;
|
||||
}
|
||||
.dm-loader.is-hiding { opacity: 0; pointer-events: none; }
|
||||
.dm-loader__pulse { animation: dmLoaderPulse 1.5s linear infinite; }
|
||||
.dm-loader__logo { width: clamp(140px, 18vw, 200px); height: auto; }
|
||||
.dm-loader__pulse { animation: dmLoaderPulse 1.5s linear infinite; display: grid; place-items: center; }
|
||||
.dm-loader__logo { display: block; margin: 0 auto; width: clamp(120px, 32vw, 180px); height: auto; }
|
||||
@keyframes dmLoaderPulse {
|
||||
50% { transform: scale(0.85); }
|
||||
100% { transform: scale(1); }
|
||||
|
||||
Reference in New Issue
Block a user