fix the mobile responsive
This commit is contained in:
@@ -8,6 +8,78 @@ import { ScrollReveal, Magnetic } from "@/animations/Reveal";
|
||||
export default function ConnectedLogistics() {
|
||||
return (
|
||||
<div className="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* Ensure the inner content wrapper is responsive and never overflows */
|
||||
.elementor-element-fdb2e58 {
|
||||
width: 100% !important;
|
||||
max-width: 650px !important;
|
||||
}
|
||||
|
||||
/* Make heading font size fluid and responsive */
|
||||
.elementor-element-7500280 .logico-title {
|
||||
font-size: clamp(26px, 3.5vw, 54px) !important;
|
||||
line-height: 1.25em !important;
|
||||
word-wrap: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
||||
/* Make sure paragraphs are responsive on all screen widths */
|
||||
.elementor-element-165dfa5 {
|
||||
width: 100% !important;
|
||||
max-width: min(619px, 100%) !important;
|
||||
}
|
||||
.elementor-element-3888a1e {
|
||||
width: 100% !important;
|
||||
max-width: min(526px, 100%) !important;
|
||||
}
|
||||
|
||||
/* Desktop/Laptop (min-width: 1025px) column width and flex rules */
|
||||
@media (min-width: 1025px) {
|
||||
.elementor-element-9ffed33 {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.elementor-element-96343ba,
|
||||
.elementor-element-71c3e1d {
|
||||
width: 50% !important;
|
||||
max-width: 50% !important;
|
||||
flex: 1 1 50% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
/* Force columns to stack vertically on mobile/tablet */
|
||||
.elementor-element-9ffed33 {
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
/* Force both children to be full width */
|
||||
.elementor-element-96343ba,
|
||||
.elementor-element-71c3e1d {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Show image at the bottom or top depending on order */
|
||||
.elementor-element-96343ba {
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
|
||||
/* Override desktop fixed widths on mobile/tablet */
|
||||
.elementor-element-165dfa5,
|
||||
.elementor-element-3888a1e {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
<div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
|
||||
{/* Image side */}
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -118,12 +118,14 @@ export default function Miles3() {
|
||||
}
|
||||
.elementor-element-4add972 .elementor-icon svg {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.elementor-element-74687fb > .elementor-widget-container { padding: 22px 0 0 0; }
|
||||
.elementor-element-74687fb .elementor-icon svg { height: 139px; }
|
||||
.elementor-element-fd9c57e .elementor-icon svg { height: 158px; }
|
||||
.elementor-element-74687fb .elementor-icon svg { max-height: 139px; }
|
||||
.elementor-element-fd9c57e .elementor-icon svg { max-height: 158px; }
|
||||
.elementor-element-fbb1628 > .elementor-widget-container { padding: 25px 0 0 0; }
|
||||
.elementor-element-fbb1628 .elementor-icon svg { height: 128px; }
|
||||
.elementor-element-fbb1628 .elementor-icon svg { max-height: 128px; }
|
||||
|
||||
/* Card titles (First / Mid / Last Mile) */
|
||||
.elementor-element-d310968 > .elementor-widget-container,
|
||||
|
||||
Reference in New Issue
Block a user