-
תגובות
-
הי,
בעמןד עם בילדר, יש לי אזור שארצה לשים בו 3 אימאג'ים זהים בשורה (כל איאמג' כ-300 פיקסל), שיהיו ממורכזים עם יחסית מעט רווח ביניהם כשיישאר ריווח בצדדים.
ניסיתי להגדיר דיביידרים אבל הגדלים לא מסתדרים לשורה של 100%…
אם יש רק 3 אימאג'ים , כ"א 33% אז נוצר ריווח גדול מדי ביניהם.
אם הם מוגדרים כ"א 25%, אז 2 דיביידברים בצדדים לא יכולים להיות שווים ברוחב והאימאג'ים לא יוצאים ממורכזים.
אם כ"א מהאימג'ים 16% ו-2 דייבדרים בצדדים כ"א 25%, אז האימאג'ים על מסך גדול נראים קטנים יותר ולא בגודל המלא שלהם.
יש לך רעיון איך לפתור את זה עם הבילדר והאזורים?
תודהבהגדרה של Section Width Content ל 100% וגם Boxed, זה אותו הדבר.
הפכתי את העמוד כולו ל-100% ואת כל האזורים לבוקס חוץ מהאזור של 3 התמונות, במבנה של כ"א מ-3 האימג'ים 16% ו-2 דייבדרים בצדדים כ"א 25%.
זה נראה בסדר אבל במסכים בינוניים עדיין יש את התופעה שתיארתי בשאלה קודם שהתמונות קטנות מדי.
יש לך איזה פיקס CSS מהיר לזה?בנוסף, באימג' וידג'ט במסכים קטנים אין ריווח בין התמונות והן צמודות, הוספתי את זה לאזור של max-width:767px
.widget-image { margin: 30px 0; }אם אתה רוצה שהאזור יהיה מחולק ל 3 הכי טוב זה להשתמש ב 3 עמודות (33%) ואז להוריד ב CSS את המרווח בין העמודות.
אם תביא קישור + סקיצה עיצובית, יהיה לנו יותר קל להביא פיתרון
תגובה זו סומנה כפרטית.מעולה, הייתי עושה דבר ראשון את האזור במצב Boxed מוריד את שני המפרידונים בצדדים, נותן לכל תמונה 33% ואחרי זה נותן לאזור padding פנימי עם CSS במסכים מעל 1024px כדי למרכז אותם. וזהו.
לדוגמא, זה מה שעשיתי באינספקטור והיה נראה מעולה:
@media (min-width: 1024px) { .your-section-class .columns {padding: 0 130px;} }אחלה תודה! נראה לי שזה בסדר עם איך שהצעת.
נתתי שם בסוף פאדינג 71 ולא 130
עם 130 שהצעת, אז 3 התמונות לא מקבלות את כל ה 100% גודל המלא ומוצגות קטנות יותר. מקווה שזה סוגר את העניין.מעולה, אני נתתי 130PX כדוגמא..
ניסיתי את הטריק שהצעת עם הפאדניק על העמודות גם עבור אזור אחר עם 2 תמונות שצריכות להיות ממש צמודות, לצערי כל הנסיונות שניסיתי לא הצלחתי להגיע לתוצאה הרצויה. תוכל להציץ בזה?
שם יש 2 תמונות עגולות קטנות, שארצה שיוצגו ממש אחת ליד השניה קרובות, ריווח ביניהן צריך להיות 5-10 פיקסל גג. (במסכי מובייל מוצג רק כפתור אחד, אז זה רלוונטי רק למסכי ביניים ומעלה)כבר בתגובה פרטית שם גם את הקישור הרלוונטי
תגובה זו סומנה כפרטית.כמו שזה נראה האופציה היחידה זה לשים את התמונות באמצעות אדיטור פשוט, אתה יכול להשתמש בקלאסים של ה hover למימוש האנימציה
בעצם אולי אפשר לעשות את זה בכלל בלי מפרידונים, אלא פשוט שני וידג'טי תמונה, כאשר תמונה אחת מיושרת לשמאל והשניה מיושרת לימין. נראה לי פיתרון נהדר
יש שם דוגמה של בלי מפרידונים בכלל (הכפתורים בחלק העליון יותר).
אם אחת מיושרת לימין והשניה לשמאל, איך הם יהיו צמודים אחד לשני? נראה לי שזה רק מרחיק אותם עוד יותר, לא? או שלא הבנתי למה התכוונת..ניסיתי את מה שהצעת (אם הבנתי נכון וגו'), תוכל לראות את זה שם עכשיו. זה אכן כמו שכתבתי רק מרחיק אותם עוד יותר.
טוב סליחה.. עשיתי את הכיוונים הפוך 🙂 בכל מקרה, איך במצב שהם נראים עכשיו הרבה יותר טוב, אפשר עוד קצת להצר את הרווח בין העמודות ולקרב אותם עוד?
טוב נראה לי שאצטרך להוסיף קלאס בכל המופעים של הכפתורים האלה ולבטל להם את הפאדינג 15 של הגריד.
הפורום 'תמיכה' נסגר לדיונים ולתגובות חדשות.