/* ═══════════════════════════════════════════════════════════════ APOLO.MA — MOBILE OVERFLOW FIX — v1.0 --------------------------------------------------------------- المشاكل المكتشفة: 1. min-width: 285px على .search-box select2 ← السبب الأول 2. min-width: 227px على .search-box select2 rendered ← السبب الثاني 3. min-width: 196px على .search-box input ← السبب الثالث 4. body: overflow-x: hidden بدون html ← ناقص 5. .row بدون margin-left/right: 0 ← Bootstrap negative margins --------------------------------------------------------------- طريقة الاستخدام: حط هاد الفايل بعد style.css مباشرة أو زيده في بعد السطر: style.css?v=2.0 ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── 1. الأساس: منع الـ overflow على html وbody معاً (style.css كتحط overflow-x: hidden على body بس — مكافيش) ───────────────────────────────────────────────────────────── */ html { max-width: 100vw !important; overflow-x: hidden !important; } html, body { box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } /* ───────────────────────────────────────────────────────────── 2. Bootstrap .row — negative margins كيسببو overflow (Bootstrap 4/5 كيحط margin-left: -15px على .row) ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { .row { margin-left: 0 !important; margin-right: 0 !important; } .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; overflow-x: hidden !important; } } /* ───────────────────────────────────────────────────────────── 3. THE MAIN CULPRIT: .search-box select2 — عندها min-width: 285px و 227px و 196px هادشي هو اللي كيكسر الـ layout فالموبايل بالكامل ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { /* السيليكت (الفئة) */ .search-box .select2-container--default .select2-selection--single, .search-box .select2-container--default .select2-selection--single .select2-selection__rendered { min-width: 0 !important; width: 100% !important; } /* الـ select2 container نفسو */ .search-box .select2-container { width: 100% !important; min-width: 0 !important; } /* حقل البحث النصي */ .search-box .group-img input { min-width: 0 !important; width: 100% !important; } /* الـ form كاملة تتكدس عمودياً */ .search-box form { flex-direction: column !important; width: 100% !important; gap: 10px; } /* كل form-group داخل search-box تاخد عرض كامل */ .search-box .form-group, .search-box .search-input, .search-box .search-btn { width: 100% !important; min-width: 0 !important; margin: 0 0 10px 0 !important; } /* الزر يتمدد لكامل العرض */ .search-box .btn, .search-box button[type="submit"] { width: 100% !important; } } /* ───────────────────────────────────────────────────────────── 4. Banner section — padding وأبعاد كبيرة فالموبايل ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { .banner-section { padding: 40px 0 0 !important; overflow: hidden !important; } .section-search { padding: 40px 0 !important; } .banner-section h1 { font-size: 26px !important; line-height: 1.3 !important; } /* إخفاء العناصر الزخرفية اللي كتعدى الحدود */ .banner-circle, .bannerleftarrow, .arrow-img { display: none !important; } /* الصور الكبيرة في banner */ .banner-imgs img { max-width: 100% !important; width: 100% !important; height: auto !important; } .banner-imgs { display: none !important; } } /* ───────────────────────────────────────────────────────────── 5. min-width الأخرى اللي ممكن تسبب مشاكل ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { /* sortby select */ .sortbyset .select2-container--default .select2-selection--single { min-width: 0 !important; width: 100% !important; } /* listing search */ .listing-search .select2-container--default .select2-selection--single { min-width: 0 !important; } /* header dropdown menus */ .header-navbar-rht > li .dropdown-menu { min-width: 160px !important; } } /* ───────────────────────────────────────────────────────────── 6. Images & Media — كيفاش تتضمن إنو الصور ما تتعداش الحدود ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { img { max-width: 100% !important; height: auto; } /* AdSense — كيتسبب overflow بحال طولحال */ ins.adsbygoogle { max-width: 100% !important; width: 100% !important; } } /* ───────────────────────────────────────────────────────────── 7. Owl Carousel / Sliders — كيخرجو من الحدود أحياناً ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { .owl-carousel { width: 100% !important; overflow: hidden !important; } .owl-stage-outer { overflow: hidden !important; } } /* ───────────────────────────────────────────────────────────── 8. Horizontal scroll wrappers — منع الـ bleed خارج الـ viewport ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { /* الفئات الأفقية */ .category-horizontal-scroll { max-width: 100vw !important; padding-left: 12px !important; padding-right: 12px !important; } /* الإعلانات الأفقية */ .av-exact-scroll { max-width: 100vw !important; } /* Featured slider */ .featured-slider { max-width: 100% !important; overflow: hidden !important; } } /* ───────────────────────────────────────────────────────────── 9. Tables — كيكسرو الـ layout فالموبايل ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } } /* ───────────────────────────────────────────────────────────── 10. Nuclear option — إذا بقاش شي عنصر خارج (هادا backup فقط، راه الفوق كيحل المشكل الأصلي) ───────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { .main-wrapper { max-width: 100vw !important; overflow-x: hidden !important; } }