יישור וידג׳ט ״תיבת אייקון״ לימין במובייל

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

selector .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
selector .elementor-widget-icon-box .elementor-icon-box-icon {
    margin: 3px 0 0 10px !important;
}

selector  .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}Code language: CSS (css)

שימו לב: יש להטמיע את הקוד בעמודה או האזור שבהם נמצאים הוידג׳טים של התיבות אייקון (ולא על הוידג׳ט ״תיבת אייקון״ עצמו).

אם האייקונים מיושרים למרכז בדסקטופ, ואנחנו רוצים שיהיו מיושרים לימין במובייל, זה הקוד:

@media screen and (max-width: 460px) {
    selector .elementor-widget-icon-box .elementor-icon-box-wrapper {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    selector .elementor-widget-icon-box .elementor-icon-box-icon {
        margin: 0px 0 0 15px !important;
    }
    
    selector .elementor-icon-box-description {
        text-align: right;
        padding: 0 !important;
    }
    
    selector .elementor-icon-box-content {
        display: flex;
        align-items: center;
    }
}Code language: CSS (css)

תוספת קטנה (תודה אבי 😉 )

אייקון עם רקע לפעמים "מותח" את הרקע שלו מטה ויוצר עיגול אובלי.
במקרה שלי הוספתי את החתיכת CSS הזאת:

selector .elementor-shape-circle .elementor-icon {
    align-self:start;
}Code language: CSS (css)

עדכון לבקשת הקהל- אותו עקרון עם וידג׳ט תיבת תמונה

selector .elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
selector .elementor-widget-image-box .elementor-image-box-img {
    margin: 3px 0 0 10px !important;
}
Code language: CSS (css)