שאלה לגבי 5 עמודות במקום 4

אוקי, עכשיו ברור,

רק לפני שאני כותב קוד, יש לך מושג איך זה אמור להראות במצב רספונסיב טאבלט/מובייל?

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

אבל בכל מקרה בואי ננסה לעשות משהו, מקווה שזה יעזור, רק חשוב שתעבדי בדיוק לפי הכללים הבאים, אמנם לא ניסיתי אותם LIVE, אבל זה צריך לעבוד:

1. תני לכל אזור שבו את רוצה לעשות את מבנה הקוביות הזה קלאס בשם box-area (ראיתי שכבר קיים קלאס כזה)

2. לאחר מכן תוסיפי ל CSS המותאם אישית (בתבנית בת או Live CSS) את הקוד הבא:

@media (min-width: 768px;) {
.section.box-area .columns {
    margin-left: -2px;
    margin-right: -2px;
}
.section.box-area .column-1,
.section.box-area .column-2,
.section.box-area .column-3,
.section.box-area .column-4,
.section.box-area .column-5, 
.section.box-area .column-6,
.section.box-area .column-7,
.section.box-area .column-8,
.section.box-area .column-9,
.section.box-area .column-10,
.section.box-area .column-11,
.section.box-area .column-12 {
    padding: 2px;
}
.section.box-area .column-2 {
    width: 20%;
}
.section.box-area .column-4  {
    width: 40%;
}
}

3. תשתמשי בבילדר בעמודה של 16% בשביל הקוביה הרגילה ובעמודה של 33% בשביל הקוביה הכפולה

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

מיזגתי את ההודעה הקודמת שלך לדיון הזה, נראה לי יהיה יותר נוח להמשיך אותו.

בכל אופן אשמח להסבר שלך על גלריה של 5 עמודות בריבר, איפה את רואה דבר כזה אצלינו בדמו http://demo.getpojo.com/riverhe/?

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

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

אוקי, אני רואה שחסר הקוד של המרווח:

@media (min-width: 768px;) {
.section.box-area .columns {
    margin-left: -2px;
    margin-right: -2px;
}
.section.box-area .column-1,
.section.box-area .column-2,
.section.box-area .column-3,
.section.box-area .column-4,
.section.box-area .column-5, 
.section.box-area .column-6,
.section.box-area .column-7,
.section.box-area .column-8,
.section.box-area .column-9,
.section.box-area .column-10,
.section.box-area .column-11,
.section.box-area .column-12 {
    padding: 2px;
}
}

בנוסף, שימי לב שהסליידר העליון יש לו רוחב שיוצא מהרוחב הנורמלי של העמוד, זה נראה שנתת לו רוחב אבסולוטי. תשני אותו לרספונסיב.