Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix the mobile responsive

Browse Source
This commit is contained in:
Aravind R
2026-06-04 20:06:39 +05:30
parent d5987b5dd1
commit 3a16bf9267
6 changed files with 192 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/sections/IndexHero.tsx
View File

@@ -52,13 +52,84 @@ export default function IndexHero() {
return (
<div className="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
<style dangerouslySetInnerHTML={{ __html: `
/* Fluid responsive font size override for hero headings */
.logico-content-slider-widget .content-slider-item-heading {
font-size: clamp(30px, 5.5vw, 80px) !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
/* Prevent horizontal overflow on slider and stage containers */
.logico-content-slider-widget,
.content-slider-wrapper,
.content-slider-container,
.content-slider,
.owl-stage-outer,
.owl-stage,
.owl-item,
.slider-item,
.slide-content,
.slide-content-inner {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Force word wrapping and responsive spacing for heading and text */
.logico-content-slider-widget .content-slider-item-heading,
.logico-content-slider-widget .content-slider-item-heading span,
.logico-content-slider-widget .content-slider-item-heading .heading-content {
white-space: normal !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
max-width: 100% !important;
}
.logico-content-slider-widget .content-slider-item-heading {
padding-left: 15px !important;
padding-right: 15px !important;
}
.logico-content-slider-widget .text-content {
width: 100% !important;
max-width: min(680px, 100%) !important;
box-sizing: border-box !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Responsive slider heights */
.logico-content-slider-widget .owl-stage-outer {
height: 800px !important;
}
@media (max-width: 840px) {
.logico-content-slider-widget .owl-stage-outer {
height: 600px !important;
}
}
@media (max-width: 480px) {
.logico-content-slider-widget .owl-stage-outer {
height: 520px !important;
}
}
@media (max-width: 660px) {
.logico-content-slider-widget .content-slider-item-heading {
font-size: clamp(20px, 7vw, 32px) !important;
}
}
`}} />
<div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
<div className="elementor-widget-container">
<div className="logico-content-slider-widget">
<div className="content-slider-wrapper">
<div className="content-slider-container">
<div className="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag" ref={containerRef}>
<div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden", height: "800px" }}>
<div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden" }}>
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
{/* Slide 1 */}