גלילה רוחבית במובייל - איך פותרים את התקלה?
שון עמר
שון עמר

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

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

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

מתחילים.

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

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

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

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

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

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

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

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

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

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

שתפו את הפוסט אם אהבתם

שיתוף ב linkedin
שיתוף ב twitter
שיתוף ב email
שיתוף ב whatsapp
שיתוף ב facebook

רוצה להתארח בבלוג שלנו?

יש לך תוכן על אלמנטור שיכול לעניין או לתרום לחברי הקהילה?
אנחנו מזמינים אותך ליצור איתנו קשר ולהתארח בבלוג שלנו

תגובה אחת

  1. היי. תודה על ההדרכה אבל זה לא פותר את הבעיה. מדובר אצלי באיזור שמכיל html הרשמה לרשימת תפוצה.
    יש לכם אולי רעיון אחר איך לפתור?
    תודה מראש!

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

עדכונים מהקהילה

הצטרפו לרשימת הדיוור שלנו וקבלו ראשונים את כל העדכונים הכי שווים

* בדיוק כמוכם גם אנחנו לא אוהבים ספאם – מבטיחים לעדכן רק בדברים מעניינים

דילוג לתוכן