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

75
src/components/sections/SolutionsHero.tsx
View File

@@ -57,6 +57,10 @@ export default function SolutionsHero() {
width: 100% !important;
max-width: 1000px !important;
margin: 0 auto !important;
/* Contain the slider theme's inherited 20px padding (content-box) so
width:100% + padding doesn't overflow the viewport and push the
heading off-center on mobile. */
box-sizing: border-box !important;
}
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
@@ -110,6 +114,12 @@ export default function SolutionsHero() {
border-radius: 25px !important;
}
/* The stage-outer carries an inline height:800px; collapse it to the
slide height so there is no dead empty space below the hero card. */
.elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
height: 620px !important;
}
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
width: 100% !important;
min-height: 620px !important;
@@ -133,6 +143,10 @@ export default function SolutionsHero() {
border-radius: 22px !important;
}
.elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
height: 560px !important;
}
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
min-height: 560px !important;
height: 560px !important;
@@ -151,6 +165,28 @@ export default function SolutionsHero() {
line-height: 1.05 !important;
overflow-wrap: break-word !important;
}
/* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the
Home and How-It-Works heroes. site.css parks it ~80px in from the
right (looks left/centred), and the wide dot navigation eats the
right side, so hide the dots on mobile and right-align the counter. */
.elementor .elementor-element.elementor-element-6c7cbcb .slider-footer {
text-align: right !important;
margin-bottom: 24px !important;
}
.elementor .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
justify-content: flex-end !important;
margin-left: 22px !important;
margin-right: 22px !important;
}
.elementor .elementor-element.elementor-element-6c7cbcb .owl-dots {
display: none !important;
}
/* Hide the prev/next arrows on mobile (they overlap the counter) —
slides still auto-rotate, matching the home hero. */
.elementor .elementor-element.elementor-element-6c7cbcb .owl-nav {
display: none !important;
}
}
`}} />
@@ -226,14 +262,45 @@ export default function SolutionsHero() {
</div>
</div>
{/* Navigation controls (prev/next) — matches the home hero slider */}
<div className="owl-nav">
<button
type="button"
className="owl-next"
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
aria-label="Next"
style={{ cursor: "pointer", border: "none", outline: "none" }}
/>
<button
type="button"
className="owl-prev"
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
aria-label="Previous"
style={{ cursor: "pointer", border: "none", outline: "none" }}
/>
</div>
{/* Progress indicators */}
<div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
<div className="slider-footer-content">
<div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "10px" }}>
<div className="slider-progress-wrapper" style={{ marginRight: "15px" }}>
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
/
<span className="slider-progress-all">02</span>
<div className="slider-progress-wrapper" style={{ marginRight: "15px", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<div style={{ marginBottom: "4px" }}>
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
{" / "}
<span className="slider-progress-all" style={{ opacity: 0.6 }}>02</span>
</div>
{/* Progress line — red bar slides to match the active slide (mirrors the home hero) */}
<div style={{ width: "80px", height: "2px", background: "rgba(255, 255, 255, 0.2)", position: "relative", borderRadius: "1px", overflow: "hidden" }}>
<div style={{
position: "absolute",
left: activeSlide === 0 ? "0" : "50%",
width: "50%",
height: "100%",
background: "#c01227",
transition: "left 0.3s ease"
}} />
</div>
</div>
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "flex", gap: "8px" }}>
<button