как настроить css при использовании переключателя языка - PullRequest
0 голосов
/ 09 апреля 2020

Мне нужна помощь со следующей

ссылкой на страницу: https://mirakrealty.com/services/?preview_id=1182&preview_nonce=3adae2fc8b&_thumbnail_id=-1&preview=true

  • Я установил плагин переключения языка с LTR на RTL
  • на этой странице они * raw html raw
  • ПРОБЛЕМА: когда я переключаю язык на RTL, выравнивание текста остается влево

вот код ниже

Добрый совет, что добавить, когда пользователь переключает язык, я бы выровнялся по правой стороне

КОД:

<div class="vc_row wpb_row vc_row-fluid">
    <div class="wpb_column vc_column_container vc_col-sm-12">
        <div class="vc_column-inner">
            <div class="wpb_wrapper">
                <div class="widget widget-features-box  default">
                    <div class="content">
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                <div class="feature-box">
                                    <div class="feature-box-inner">
                                        <div class="fbox-icon">
                                            <div>
                                                <img class="img"
                                                    src="https://mirakrealty.com/wp-content/uploads/2020/02/handshake-solid.png"
                                                    alt="">
                                            </div>
                                        </div>
                                        <div class="fbox-content ">
                                            <h3 class="ourservice-heading">MARKET <br>OVERVIEW</h3>
                                            <div class="description">We are keen on educating our clients with the latest news and trends in the real estate market. Starting from facts and figures to law updates and to the extent of country transaction amounts.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="feature-box">
                                    <div class="feature-box-inner">
                                        <div class="fbox-icon">
                                            <div>
                                                <img class="img" src="https://mirakrealty.com/wp-content/uploads/2020/02/800px_COLOURBOX28373425.png" alt="">
                                            </div>
                                        </div>
                                        <div class="fbox-content ">
                                            <h3 class="ourservice-heading">PROPERTY <br>PURCHASING</h3>
                                            <div class="description">Based on the investment plan, we handpick pieces of real-estate that suit the investor’s requirement the best. And we make sure that the investment opportunities available in the market yield high ROI.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="feature-box">
                                    <div class="feature-box-inner">
                                        <div class="fbox-icon">
                                            <div>
                                                <img class="img" src="https://mirakrealty.com/wp-content/uploads/2020/02/cogs-solid.png" alt="">                            
                                            </div>
                                        </div>
                                        <div class="fbox-content ">
                                            <h3 class="ourservice-heading">PROPERTY <br>MANAGEMENT</h3>
                                            <div class="description">In case a client desires to avail property management services, whether through short-term or long-term rentals. We facilitate this service after studying the unit and then offer the most suitable plan to the client.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="feature-box">
                                    <div class="feature-box-inner">
                                        <div class="fbox-icon">
                                            <div>
                                                <img class="img" src="https://mirakrealty.com/wp-content/uploads/2020/02/business-time-solid.png" alt="">

                                            </div>
                                        </div>
                                        <div class="fbox-content ">
                                            <h3 class="ourservice-heading">INVESTMENT <br>WALLETS</h3>
                                            <div class="description">Start with buying your first property to gain financial freedom. Then progress by gaining indirect income through owning multiple properties around the world.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="feature-box">
                                    <div class="feature-box-inner">
                                        <div class="fbox-icon">
                                            <div>
                                                <img class="img" src="https://mirakrealty.com/wp-content/uploads/2020/02/wallet-solid.png" alt="">
                                            </div>
                                        </div>
                                        <div class="fbox-content ">
                                            <h3 class="ourservice-heading">CONSULTANCY AND INVESTMENT PLANNING</h3>
                                            <div class="description">We spend time to study and understand the investor’s needs. We then focus on building and executing a time-bound profitable plan for the investor to achieve the goal agreed upon.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="feature-box">
                                    <div class="feature-box-inner">
                                        <div class="fbox-icon">
                                            <div>
                                                <img class="img"
                                                    src="https://mirakrealty.com/wp-content/uploads/2020/02/1979644-200.png"
                                                    alt="">
                                            </div>
                                        </div>
                                        <div class="fbox-content ">
                                            <h3 class="ourservice-heading">EXTRA <br>SERVICES</h3>
                                            <div class="description">- Receiving and evaluating the property<br>
                                                - Property pricing evaluation<br>
                                                - Facilitating and following up on legal matters <br>
                                                - Representing the owners in owners management society
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .widget-features-box.default .ourservice-heading {
        width: 70%;
        border-bottom: 2px solid #114a82;
    }

    .widget-features-box.default .fbox-icon {
        margin: 24px 9px;
    }

    .widget-features-box.default {
        text-align: left;
    }



    @media screen and (max-width: 767px) {
        .description {
            margin: 0 0 15px 0;
        }

        .col-xs-12 {
            border: 2px solid aliceblue;
        }
    }

    @media screen and (min-width: 768px) {
        .col-sm-4 {
            width: 32.8%;
            border: 2px solid aliceblue;
            height: 335px;
            margin: 0 2px;
        }

        .col-sm-4:hover {
            box-shadow: 2px 2px 10px 10px #f0f9fb;
        }
    }

    @media screen and (min-width: 992px) {
        .col-sm-4 {
            border: 2px solid aliceblue;


            height: 310px;
            width: 31.222%;
            margin: 10px 10px;
        }

        .col-sm-4:hover {
            box-shadow: 2px 2px 10px 10px #f0f9fb;
        }
    }

    @media screen and (min-width: 1153px) {
        .col-sm-4 {
            width: 31.6%;
        }
    }
</style>

1 Ответ

0 голосов
/ 09 апреля 2020

В вашей таблице стилей вы должны обновить любую директиву выравнивания по левому краю для класса rtl, который добавляется в тело при переключении на арабский язык. Например:

.widget-features-box.default {
    text-align: left;
}
body.rtl .widget-features-box.default {
    text-align: right;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...