راهکار کامل رفع مشکل اسکرول افقی ناخواسته در وردپرس با المنتور

سلام به شما دوستان علمینه‌ای عزیز!
در این مقاله آموزشی می‌خواهیم یکی از مشکلات رایج در طراحی سایت با المنتور را بررسی کنیم: “اسکرول افقی ناخواسته در حالت موبایل”. این مشکل معمولاً زمانی رخ می‌دهد که عناصر صفحه از عرض استاندارد دستگاه‌های موبایل فراتر رفته باشند.

علت ایجاد اسکرول افقی

عناصر با عرض ثابت (مثل جداول، تصاویر بزرگ)
پدینگ‌ها یا مارژین‌های نادرست
ویجت‌های خاص المنتور که به درستی ریسپانسیو نشده‌اند
تنظیمات نادرست viewport

راهکارهای تضمینی رفع مشکل

۱. راهکار پایه (جلوگیری از اسکرول افقی)

				
					/* اصلی‌ترین کد برای رفع اسکرول افقی */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.elementor-section-wrap {
    width: 100% !important;
}

۲. نسخه پیشرفته (برای سایت‌های پیچیده)

				
					/* نسخه حرفه‌ای با حفظ ریسپانسیو بودن */
:root {
    --max-container-width: 100vw;
}

body .elementor > .elementor-section {
    width: var(--max-container-width) !important;
    left: 0 !important;
    right: 0 !important;
}

.elementor-widget-wrap {
    overflow: hidden !important;
    contain: content;
}

/* حل مشکل تصاویر */
.elementor-widget-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

۳. راهکار ویژه برای المنتور (بدون بهم ریختگی لایوت)

				
					/* ایمن برای تمام صفحات المنتور */
.elementor-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* رفع مشکل برای ویجت‌های خاص */
.elementor-widget:not(.elementor-widget-text-editor) {
    transform: translateZ(0);
    will-change: transform;
}

راهکارهای تکمیلی

برای تصاویر و اسلایدرها

				
					/* تضمین نمایش صحیح تصاویر */
.elementor-image-box-img img,
.elementor-slider img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

استفاده از جاوااسکریپت (اختیاری):

				
					// جلوگیری از اسکرول افقی با JS
document.addEventListener('DOMContentLoaded', function() {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        document.documentElement.style.overflowX = 'hidden';
        document.body.style.overflowX = 'hidden';
    }
});

نحوه پیاده‌سازی

۱. به وردپرس > ظاهر > سفارشی‌سازی > CSS اضافی بروید
۲. یا در المنتور > تنظیمات سایت > Custom CSS
۳. کدهای مناسب را وارد و ذخیره کنید

نکات مهم

همیشه پس از اعمال تغییرات، کش مرورگر و سایت را پاک کنید (Ctrl+F5)
در دستگاه‌های مختلف تست کنید
از !important فقط در موارد ضروری استفاده کنید
اگر از پلاگین‌های بهینه‌سازی استفاده می‌کنید، ممکن است نیاز به غیرفعال کردن موقت آنها داشته باشید

جمع‌بندی

با اعمال این کدها می‌توانید مشکل اسکرول افقی ناخواسته را در سایت‌های وردپرسی با صفحه‌ساز المنتور به طور کامل حل کنید. اگر پس از اعمال این تغییرات همچنان مشکل داشتید، می‌توانید در بخش نظرات مطرح کنید تا راهنمایی کنیم.

امیدوارم این آموزش برای شما مفید بوده باشد!
✅ علمینه – آموزش‌های کاربردی وردپرس