גלילה רוחבית במובייל – איך פותרים את התקלה?

קרה לכם שעבדתם על אתר בגרסת הדסקטופ שלו וכשעברתם לבדוק איך נראים הדברים במובייל – קיבלתם גלילה רוחבית שגורמת לאתר לזוז ימינה-שמאלה?
אז נכון שיש לא מעט שמעצבים קודם כל למובייל ״מובייל פירסט״, אבל נראה שעדיין רוב המעצבים מתחילים מהדסקטופ, בינינו, זה לא כל כך משנה כל עוד עושים את זה נכון ומשקיעים באפיון ובעיצוב של שני המצבים.

גלילה רוחבית במובייל יכולה להתרחש בגלל לא מעט סיבות, זו גם הסיבה שהתקלה הזו מתסכלת לא מעט מעצבים, לא תמיד פשוט לאתר מה גורם לבעיה. שון עמר, מקהילת אלמנטור ישראל, הכין לנו מדריך קצר שיסביר לכם בדיוק איך לאתר את מקור התקלה ואיך לפתור אותה בלי להתברבר.

מתחילים.

1. הכירו את חלונית הניווט

חלונית הניווט מזכירה את חלון השכבות (Layers) במגוון תוכנות העיצוב השונות (Photoshop,XD,illustrator…) היא מאפשרת לנווט בקלות בין אזורים או וידגיטים בעמוד. החלונית הזו גם עוזרת לנו להבין באיזה מהאזורים נמצאת התקלה.
כל מה שצריך לעשות זה לכבות את כל האזורים על ידי לחיצה על אייקון העין בחלונית ולהדליק אותם אחד אחד – כך אפשר לאתר בקלות באיזה סקשיין התקלה נמצאת ולהתביית עליו 🙂

2. חפשו את הוידג׳יט הבעייתי

וידג׳טים עם הגדרות שוליים חיצוניים בערך שלילי אולי נראים טוב בדסקטופ, אבל במובייל הם יכולים ״לברוח״ מחוץ למסך ולגרום לגלילה רוחבית, כיוון שהם חורגים מגבולות העמוד.

בטאב הגדרות מתקדם של אלמנטור יש את אפשרות לקבוע 2 סוגים של שוליים:

1. שוליים פנימיים – מקבלים ערך חיובי בלבד ומאפשרים ליצור מרווח מהשוליים של האלמנט כלפי פנימה וליצור ריווח פנימי בין גבולות העמודה לוידגיט. למשל במקרה שהוספנו שוליים פנימיים לעמודה המכילה תמונה – הם יקטינו את התמונה.
2. שוליים חיצוניים – מקבלים ערכים חיוביים וגם שליליים ומאפשרים ליצור מרווח מהשוליים של הוידגט כלפי חוץ, כלומר הם ירחיקו את הוידג׳ט מגבולות העמודה אבל לא ישפיעו על גודל הוידגיט, הם פשוט דוחקים אותו.

התחילו לעבור על כל אזור, עמודה או וידגיט ובצעו איפוס לשוליים החיצוניים (תחת הלשונית "מתקדם"). אם עשיתם הכל נכון ואיפסתם את האלמנטים הבעייתיים בעמוד שלכם, הגלילה הצידית בעריכת המובייל תיעלם וכך תדעו שפתרתם את הבעיה!

כמובן שתמיד אני ממליץ לבדוק בצורה האמיתית (פשוט רעננו את העמוד במובייל).

שון עמר, הבעלים של סטודיו SMART Digital, חי ונושם דיגיטל ויזמות. הדבר העיקרי שמניע אותי בעשייה היא היכולת להיות יוצר. עוסק בעיצוב ופיתוח חווית משתמש (UX/UI), אפיון, תכנון, שיווק והקמה של מגוון סוגי אתרים, חנויות מסחר אינטרנטיות והגדלת מכירות. בעיניים שלי ובעיניי הלקוחות שלי אני לא "בונה אתרים", אני יועץ, מלווה, חבר, מורה דרך והאדם שיעזור לכם לייצר זהות מנצחת בדיגיטל.