2 روش حل مشکل اسکرول افقی موبایل در المنتور

آیا سایت المنتوری خود را روی دستگاه موبایل تست کرده اید و متوجه شده اید که وقتی شروع به پیمایش یا اسکرول می کنید، فضای خالی در سمت چپ یا راست صفحه بوجود می آید؟ و یا مشکل اسکرول افقی در المنتور دارید؟ پس برای حل مشکل حتما در ادامه مقاله همراه ما باشید.

یکی از خطاهای رایج المنتور بوجود آمدن فضای خالی در چپ و راست و یا بالا و پایین سایت در دستگاه های موبایل هست. در این آموزش ما 2 روش بسیار کاربردی و عملی را برای شما معرفی کردیم که هر 2 روش می توانند مشکل شما را به صورت کامل حل کنند.

اگر این مشکلی است که با آن روبرو هستید ، این مقاله آموزشی به شما نشان می دهد که چگونه می توانید مشکل نوار پیمایش افقی را در دستگاه های تلفن همراه(موبایل) برطرف کنید.

چرا این اتفاق می افتد؟

این مشکل زمانی رخ می دهد که یک یا چند عنصر در صفحه وجود داشته باشد که سرریزی (بیرون زدگی از صفحه) ایجاد می کند.

[irnot title=”سرریزی چیست؟”]با برخی از تنظیمات طراحی سفارشی در المنتور، می توانید محتوای ویجت را از ناحیه ستون آن “خارج” کنید. به این قسمت از محتوا که خارج از محدوده ستون آن دیده می شود ، سرریزی می گویند.[/irnot]

وقتی محتوای ویجت خیلی بزرگ باشد یا موقعیت آن طوری باشد که از عرض دستگاه در موبایل بیشتر نباشد ، این امر باعث ایجاد یک مشکل پیمایش افقی می شود. برای نمایش این محتوا به بازدیدکنندگان وب سایت ، مرورگر شما باید یک نوار پیمایش افقی اضافه کند. (این کار هم به صورت پیشفرض توسط مرورگر انجام می شود).

چگونه می توان مشکل اسکرول افقی موبایل در المنتو را برطرف کرد؟

مشکل تنظیم نوار پیمایش افقی در دستگاه های تلفن همراه را می توان با تنظیم سرریز به حالت پنهان برطرف کرد. می توانید این کار را با استفاده از تنظیمات بخش در المنتور یا با افزودن کد CSS انجام دهید.

روش 1: رفع مشکل سرریز با تنظیمات المنتور

برای تنظیم سرریز روی مخفی یا پنهان می توانید از تنظیمات بخش در المنتور استفاده کنید. اگر بیش از یک بخش دارید که سرریز ایجاد می کند ، باید این کار را برای هر یک از آن بخش ها انجام دهید. اگر این مورد در بیش از یک صفحه اتفاق می افتد ، باید این کار را در صفحات دیگر تکرار کنید.

پس بیایید نحوه انجام این کار را به شما نشان دهیم:

مرحله 1 – به صفحه ای که مشکل سرریز وجود دارد بروید و روی “ویرایش با المنتور” کلیک کنید ؛

مرحله 2 – روی گزینه “ویرایش بخش” کلیک کنید تا ویرایش بخش با سرریز برای شما نمایش داده شود.

مرحله 3 – در بخش “محتوا” ، به منوی کشویی “Overflow یا سرریزی” رفته و گزینه “Hidden یا مخفی” را انتخاب کنید.

مرحله 4 – برای ذخیره تغییرات روی “به روزرسانی” کلیک کنید.

حلههه. مشکل این بخش را حل کردید.

[irinfobox]در اینجا به خاطر داشته باشید که با این کار سرریز در همه طرف قسمت حذف می شود. بنابراین ، اگر عمدا مقداری سرریز را در بالا و پایین بخش تنظیم کنید ، این موارد نیز پنهان می شوند.[/irinfobox]

در این تصویر ، می توانید مناطق سرریز که پنهان شده اند را مشاهده کنید:

روش 2: رفع مشکل سرریز با افزودن کد CSS

دو مورد وجود دارد که در آنها این روش بیشتر از استفاده از گزینه های المنتور به شما کمک می کند:

1. برای جلوگیری از پیمایش افقی ، باید سرریز را در بالا و پایین بخش نگه دارید و در طرفین پنهان کنید.
2. شما عناصر زیادی با مشکل سرریز دارید و به راه حلی نیاز دارید که برای کل وب سایت شما کاربرد داشته باشد.

لطفاً برای حذف سرریز با استفاده از کد سفارشی CSS ، این مراحل را دنبال کنید:

مرحله 1 – به نمایش > سفارشی سازی> CSS اضافی بروید.

مرحله 2 – کد CSS زیر را اضافه کنید:

html,
body{
  width:100%;
  overflow-x:hidden;
}

مرحله 3 – برای ذخیره تغییرات روی “انتشار” کلیک کنید.

این روش تمام سرریزهای سمت چپ و راست را برای همه بخشها و صفحات شما را حذف می کند. همچنین ، سرریز بالا و پایین شما را در جایی که نیاز است همچنان قابل مشاهده نگه می دارد.