שינוי רספונסיביות של גלריה

פורום התמיכה פתוח למשתמשים מנויים בלבד. יש להתחבר או להרשם כדי להוסיף דיון או תגובה בפורום.

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

ראשי › פורומים › תמיכה › שינוי רספונסיביות של גלריה

דיון זה מוגדר: סגור

תגיות: 

מוצגות 20 תגובות – 1 עד 20 (מתוך 20 סה״כ)
  • מאת
    תגובות
  • 11/02/2015 בשעה 09:08 #16531

    גיל
    משתתף

    שלום, אם אני רוצה שהגריד של הגלריה בבורדר שמופיע באתר ב-4 טורים שכל אחד 25% רוחב, יופיע במובייל בטור אחד ברוחב 100%, בדיוק כמו שמופיעים המוצרים ב-woocommerce – איך עושים זאת?

    11/02/2015 בשעה 12:21 #16561

    Noa
    משתתף

    שלום רב,

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

    כך הגלריה תוצג בטור אחד.

    11/02/2015 בשעה 12:57 #16568

    גיל
    משתתף

    תודה – זה אכן עובד לפי ההנחיות האלה, אבל אם רוצים שזה יופיע בדסקטופ ב-4 טורים ובמובייל בטור אחד – בדרך הזאת צריך ליצור שתי גלריות, כל אחת עם הגדרות שונות למספר הטורים.
    ומה יופיע בטאבלט במצב כזה?
    בטח יש איזה שינוי שאפשר לעשות ב-CSS כדי שאותה גלריה תופיע אחרת בכל סוג מכשיר. מה שאני מחפשת הוא הקוד המתאים, אם אין דרך להגדיר את זה בתבנית.
    @media only screen and (min-width: 768px) and (max-width: 959px) {……

    11/02/2015 בשעה 13:36 #16570

    Ariel
    משתתף

    כמובן שבאמצעות CSS אפשר לעשות את זה, הנה קוד לדוגמא:

    /* Tablet (Grid 4 > Grid 2)*/
@media (min-width: 768px) and (max-width: 959px) {
.gallery.gallery-columns-4 .gallery-item {
    max-width: 50%;
}
}
/* Tablet (Grid 4 > Grid 1)*/
@media (max-width: 767px) {
.gallery.gallery-columns-4 .gallery-item {
    max-width: 100%;
}
}
    11/02/2015 בשעה 15:23 #16578

    גיל
    משתתף

    ניסיתי – הכנסתי את זה ל-live css, וזה לא השפיע

    11/02/2015 בשעה 15:47 #16582

    Noa
    משתתף

    אפשר קישור לאתר?

    11/02/2015 בשעה 15:52 #16584

    גיל
    משתתף
    תגובה זו סומנה כפרטית.
    11/02/2015 בשעה 15:53 #16586

    גיל
    משתתף
    תגובה זו סומנה כפרטית.
    11/02/2015 בשעה 18:14 #16598

    Ariel
    משתתף

    איפה שמת את ה CSS שכתבתי לך?

    צריך לשים אותו ב > עיצוב > התאמה אישית > Live CSS

    או בקבצי סטייל שבתוך התבנית בת

    11/02/2015 בשעה 18:18 #16601

    גיל
    משתתף

    ב > עיצוב > התאמה אישית > Live CSS

    11/02/2015 בשעה 18:24 #16604

    Ariel
    משתתף

    היתה לי טעות בכתיבה של הקוד CSS – ערכתי את זה, תעתיק את זה במקום הקוד הקודם וזה אמור לעבוד

    11/02/2015 בשעה 18:39 #16606

    גיל
    משתתף

    עובד – תענוג שדברים מסתדרים כמו שצריך – תודה רבה רבה!

    12/02/2015 בשעה 11:57 #16634

    גיל
    משתתף

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

    .gallery-icon landscape {
    border-width: 1px;
    border-color: #000000;
    }

    12/02/2015 בשעה 11:59 #16635

    גיל
    משתתף
    תגובה זו סומנה כפרטית.
    12/02/2015 בשעה 12:24 #16638

    Noa
    משתתף

    שלום רב,

    נסי להכניס את הקוד הבא ל-Live CSS:

    .gallery-item {
border-color: #e6e6e6;
border-style: solid;}
    12/02/2015 בשעה 12:53 #16641

    גיל
    משתתף

    נהדר, תודה. זה הכיוון!

    ניסיתי להוסיף לו גם margin 5px וזה נראה מצוין בניסיון ב"בדוק מרכיב", אבל לא עבד כשכנסתי לCSS

    זה הקוד שמוצג בבדיקת המרכיב:
    media="all"
    .gallery .gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    padding: 5px;
    margin: 0 !important;

    12/02/2015 בשעה 13:27 #16645

    Noa
    משתתף

    האם ניסית להכניס את ה-margin כך:

    .gallery-item {
border-color: #e6e6e6;
border-style: solid;
margin: 5px !important;}
    12/02/2015 בשעה 15:08 #16656

    גיל
    משתתף

    כמו שכתבת ה-margin לא עובד.
    הכי קרוב שהגעתי היה כך

    .gallery-item {
border-color: #e6e6e6;
border-style: solid;
}

.gallery .gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
padding: 10px;
margin: 5px !important;
}

    אבל זה מוריד טור אחד ונשארים רק 3 טורים ולא על רוחב מלא.
    זה כנראה נובע מההגדרות של ה-div שבתוכו יושבת הגלריה. ה-id שלו gallery-1, ואני לא מוצאת את ההגדרות שלו.

    12/02/2015 בשעה 18:41 #16685

    Ariel
    משתתף

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

    13/02/2015 בשעה 08:59 #16698

    גיל
    משתתף

    מודה לכם. הצלחתי איכשהו לרווח את זה, עם margin קצת יותר מדי גדול ושינוי ל-5 טורים (שיורד אוטומטית עם ה-margin) – זה לא מדויק אבל לפחות נפרש עכשיו על רוב הרוחב.

  • מאת
    תגובות
מוצגות 20 תגובות – 1 עד 20 (מתוך 20 סה״כ)

הפורום 'תמיכה' נסגר לדיונים ולתגובות חדשות.