Моя страница
Я установил плагин переключения языка с LTR на RTL. на этой странице они * raw html raw ВОПРОС: когда я переключаю язык на RTL, ящики переходят в крайний правый и крайний левый
что добавить, чтобы, когда пользователь переключал язык, ящики иметь то же выравнивание, что и у engli sh версия
код:
<div class="vc_row wpb_row vc_row-fluid" style="background: white;">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="vc_empty_space" style="height: 32px"><span class="vc_empty_space_inner"></span></div>
<div class="vc_empty_space" style="height: 32px"><span class="vc_empty_space_inner"></span></div>
<div class="widget-text-heading no-line">
<h3 class="title">
<span>WHY INVEST IN</span>
DUBAI ? </h3>
</div>
<div class="widget widget-features-box default">
<div class="content">
<div class="row">
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-5@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">EXPO 2020</h3>
<div class="description">It expected that roughly 28 million people will visit Dubai by Expo 2020</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-2@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">MULTI-SECTORED ECONOMY</h3>
<div class="description">65% of global investment and a multi-sectored economy that does not rely on oil.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-8@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">INVESTMENT-FRIENDLY</h3>
<div class="description">A safe country for investment, supported with 0% income tax policy and facilitated by laws that ease business creation.</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-7@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">PASSPORT RECOGNITION</h3>
<div class="description" style="margin: 0 0 26px 0;">The strongest Passport
<br>world-wide</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align1">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-3@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">GLOBAL HUB</h3>
<div class="description">Dubai airport is considered the 3rd most visited in the world, they celebrated the 1 Billionth traveler in 2018</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 box-align2">
<div class="feature-box box-model">
<div class="feature-box-inner">
<div class="fbox-icon">
<div class="icon-inner ">
<img class="img" src="https://new.universalprime.co/wp-content/uploads/2020/01/Asset-6@2x.png" alt="">
</div>
</div>
<div class="fbox-content ">
<h3 class="ourservice-heading">RELIABLE INVESTMENT</h3>
<div class="description">Investments worth 37 Billion AED from Gulf residents. Total transactions reached 111 Billion in Dubai 2018.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.description {
margin: 0 0 20px 0;
}
.icon-inner{
background:#fff !important;
box-shadow:none;
}
@media only screen and (max-width: 767px) {
.col-xs-12 {
padding: 0px 14%;
}
}
@media only screen and (min-width: 768px) {
.col-sm-6 {
height: 240px;
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
margin-bottom: 80px;
}
.box-model {
position: absolute;
top: -95px;
left: 10%;
width: 80%;
}
.box-align1{
right:-80px !important;
}
.box-align2{
left:-80px !important;
}
.title{
margin-bottom:80px !important;
}
}
@media only screen and (min-width: 992px) {
.col-sm-6 {
height: 238px;
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
margin-bottom: 90px;
}
.box-model {
position: absolute;
top: -95px;
left: 10%;
width: 80%;
}
.box-align1{
right:-105px !important;
}
.box-align2{
left:-105px !important;
}
.title{
margin-bottom:80px !important;
}
}
@media only screen and (min-width: 1141px) {
.col-sm-6 {
width: 25%;
margin: 23px 12%;
background: whitesmoke;
box-shadow: 2px 2px 30px -6px #8e99a3;
height: 230px !important;
margin-bottom: 100px;
}
.box-model {
position: absolute;
top: -95px;
width: 80%;
left: 10%;
}
.box-align1{
right:-126px !important;
}
.box-align2{
left:-126px !important;
}
.title{
margin-bottom:80px !important;
}
}
@media only screen and (min-width: 1141px) {
.box-align1{
right:-114px !important;
}
.box-align2{
left:-114px !important;
}
}
@media only screen and (min-width: 1200px) {
.box-align1{
right:-125px !important;
}
.box-align2{
left:-125px !important;
}
}
@media only screen and (min-width: 1290px) {
.box-align1{
right:-162px !important;
}
.box-align2{
left:-162px !important;
}
}
</style>