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

72
src/components/sections/ConnectedLogistics.tsx
View File

@@ -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="{&quot;background_background&quot;:&quot;classic&quot;}">
{/* Image side */}