گاهی اوقات ممکن است تعدادی ستون را در نسخه دسکتاپ قالب دیوی طراحی کرده و پس از تست در موبایل متوجه شویم که برخلاف طراحی انجام شده قسمتهای یک ستون برعکس نمایش داده شوند. این مشکل زمانی بیشتر خود را نشان می دهد که اولویت هر بخش برای ما مهم باشد. مثلا فرض کنید در یک بخش چهار ستونی قرار است یک فرآیند ۴ مرحله ای نمایش داده شود. در نسخه دسکاپ قالب دیوی مشکلی نخواهیم داشت، اما در نسخه موبایل ممکن است فرآید از انتها به ابتدا مشاهده شود.
برای رفع این مشکل رو راهکار پیشنهاد می شود؛
روش اول: از سطر و بخش ایجاد شده یک داپلیکیت ایجاد کنید، به قسمت تنظیمات پیشرفته هر بخش رفته و از گزینه نمایش و هدم نمایش در موبایل، تبلت، دسکتاپ استفاده کنید. برای این کار در نسخه اول (اصلی) تیک عدم نمایش در موبایل را فعال نموده و در نسخه دوم (داپلیکیت) تیکهای عدم نمایش در دسکتاپ و تبلت را فعال نمایید. اکنون می توانید برای نسخه موبایل چیدمان ستون های هر بخش را تغییر داده م متناسب با فضای موبایل فارسی راستچین نمایید.
روش دوم: در این روش ابتدا کد زیر را در قسمت CSS سفارشی قالب دیوی وارد نمایید.
/***Switch column order on mobile***/
@media only screen and ( max-width: 980px ) {
.flip {
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse !important;}
}
/***end switch column on mobile***/سپس به قسمت تنظیمات پیشرفته بخش(شناسه css و کلاس ها) رفته و در فیلد کلاس(فیلد دوم) عبارت flip را وارد نمایید. با این روش بصورت خودکار در نسخه موبایل چیدمان معکوس شده و بطور صحیح استاندارد زبان فارسی نمایش داده می شود. بدیهی است در روش دوم نیازی به ایجاد نسخه داپلیکیت از بخش نمی باشد.
آخرین دیدگاه‌ها