/* ============================================================ Global responsive fixes ------------------------------------------------------------ Goals: 1. Eliminate the page-level horizontal scrollbar. 2. Keep media (images, maps, videos) and wide tables inside the viewport on every screen size. This file is linked LAST in so it overrides the theme stylesheets without editing them. ============================================================ */ /* 1. Never allow horizontal overflow at the document level. The theme animates elements in with animate.css (fadeInRight / fadeInLeft), which briefly translates them off-canvas to the right and creates a flickering horizontal scrollbar. Clipping at the document edge is the standard fix. */ html, body { /* `clip` prevents horizontal scroll WITHOUT creating a scroll container, so `position: sticky` descendants keep working. `hidden` is the fallback for older browsers. */ overflow-x: hidden; overflow-x: clip; max-width: 100%; } /* 2. Media should never exceed its container */ img, svg, video, iframe, embed, object, canvas { max-width: 100%; } /* Embedded Google maps / YouTube iframes often carry fixed width/height attributes — keep them fluid */ iframe { max-width: 100%; } /* 3. Long words / URLs must not push the layout wider */ p, li, td, th, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-wrap: break-word; } /* 4. Wide tables inside rich text content scroll within their own box instead of stretching the whole page */ .tab-panel, .product-detail { max-width: 100%; } .tab-panel table, .product-detail table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 5. Product-details image gallery `.img-display` was a hard 450px and the thumbnail row was a non-wrapping flex of 120px items — both overflowed on phones. */ .img-select { flex-wrap: wrap; } @media (max-width: 575.98px) { .img-display { width: 100% !important; max-width: 450px; margin: 0 auto; } .img-select { justify-content: center; } } /* 6. Defensive: the desktop mega-menu panel spans the full header width; ensure its padding is included in that width */ .nav-menu .mega-menu > .mega-menu-panel { box-sizing: border-box; } /* 7. Breadcrumb band sits below the FIXED header. The theme's 100px top margin is too short for the desktop header (topbar + logo bar), so the white page title was rendering behind the header and looked cut off. Offset it enough to clear the header. */ .breadcrumbs { margin-top: 140px; } @media (max-width: 991.98px) { /* Mobile: top bar is hidden and the header is shorter */ .breadcrumbs { margin-top: 90px; } } /* 8. Product details: the card wrapper was locked to 80vh and centred, which left large empty white bands above and below the product. Let it size to its content instead. */ @media (min-width: 992px) { .card-wrapper { height: auto !important; } }