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

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

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

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

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

תגיות: 

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

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

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

    שלום רב,

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

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

    11/02/2015 בשעה 12:57 #16568
    גיל
    Participant

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

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

    כמובן שבאמצעות 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
    גיל
    Participant

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

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

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

    11/02/2015 בשעה 15:52 #16584
    גיל
    Participant
    תגובה זו סומנה כפרטית.
    11/02/2015 בשעה 15:53 #16586
    גיל
    Participant
    תגובה זו סומנה כפרטית.
    11/02/2015 בשעה 18:14 #16598
    Ariel
    Participant

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

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

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

    11/02/2015 בשעה 18:18 #16601
    גיל
    Participant

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

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

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

    11/02/2015 בשעה 18:39 #16606
    גיל
    Participant

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

    12/02/2015 בשעה 11:57 #16634
    גיל
    Participant

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

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

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

    שלום רב,

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

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

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

    ניסיתי להוסיף לו גם 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
    Participant

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

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

    כמו שכתבת ה-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
    Participant

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

    13/02/2015 בשעה 08:59 #16698
    גיל
    Participant

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

  • מאת
    תגובות
מוצגות 20 תגובות – 1 עד 20 (מתוך 20 סה״כ)
  • הפורום 'תמיכה' נסגר לדיונים ולתגובות חדשות.