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

fix mobile view issue

Browse Source
This commit is contained in:
Aravind R
2026-06-15 18:20:48 +05:30
parent 205924e057
commit 0560b86b87
25 changed files with 956 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,9 +86,20 @@ export default function ConnectedLogistics() {
padding-right: 0 !important;
}
/* Force ScrollReveal wrapper div to span full width */
.elementor-element-96343ba > div {
width: 100% !important;
height: auto !important;
}
/* Show image at the bottom or top depending on order */
.elementor-element-96343ba {
margin-top: 30px !important;
margin-top: 0px !important;
}
/* Reduce padding bottom of the content section on tablet */
.elementor-element-71c3e1d {
padding-bottom: 24px !important;
}
/* Override desktop fixed widths on mobile/tablet */
@@ -98,27 +109,49 @@ export default function ConnectedLogistics() {
max-width: 100% !important;
}
/* Tablet overrides: ~15% smaller than site.css's 450px with centered layout */
/* Allow widget container to take 100% width on mobile/tablet */
.elementor-element-99768ba {
width: 100% !important;
max-width: 100% !important;
}
/* Tablet overrides */
.elementor-element-99768ba .elementor-widget-container {
padding: 30px !important;
padding: 10px !important;
display: block !important; /* Disable flex centering layout on mobile/tablet */
width: 100% !important;
}
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important;
max-width: 382px !important;
max-width: 600px !important; /* allow up to 600px on tablet */
border-radius: 25px !important; /* Explicitly keep 25px */
}
}
@media (max-width: 767px) {
/* Mobile overrides: ~15% smaller than site.css's 90% with 10% identical padding on all 4 sides */
/* Mobile overrides: let container take 100% width and image fill it */
.elementor-element-99768ba {
width: 100% !important;
max-width: 100% !important;
}
/* Eliminate extra gap under the content column on mobile */
.elementor-element-71c3e1d {
padding-bottom: 12px !important;
}
.elementor-element-99768ba .elementor-widget-container {
padding: 10% !important;
padding: 0px !important; /* Eliminate padding to maximize image width/height */
display: block !important; /* Disable flex centering layout on mobile/tablet */
width: 100% !important;
}
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
border-radius: 25px !important; /* Explicitly keep 25px */
}
}