Landbot v3 - Web CSS - RTL

Pau Sanchez Updated by Pau Sanchez

In case you want to adapt the design of the interface for RTL users, please add the code below to the Design / Code / Add CSS section

v.01 Last update 11th July 2020

body{
direction:rtl
}
.Footer, .social-button{
direction:ltr !important
}

.InputFile{
margin-right: 155px;
}

.DayPickerInput-OverlayWrapper{
margin-right: 282px;
}

.InputYesNo{
margin-right: 155px;
}

.InputYesNo .custom-buttons .custom-button:not(:last-child){
margin-right: 0px !important;
margin-left: 20px !important
}

.custom-buttons .custom-button:not(:last-child):not(.is-fullwidth){
margin-right: 0px !important
}

.InputRating{
margin-right: 155px;
}

.InputScale{
margin-right: 155px;
}


/*MOBILE - LIVECHAT*/
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {

.msg-grid-row-container .msg-grid-row .msg-grid-left {
margin-left: .5rem;
}

.Message .message-right .MessageDate {
padding-right: 11px;
}
/*Message*/
.Message .is-reverse{
margin-left: 0px !important;
}
/*Buttons*/
.InputButtons{
margin-right: 0px !important
}
.input-button{
margin-right: 8px !important
}
.input-button:nth-of-type(odd){
margin-right: 0px !important
}

.InputFile{
margin-right: 0px !important
}

.InputRating{
margin-right: 0px !important
}

.DayPickerInput-OverlayWrapper{
margin-left: 45px !important;
}

.InputYesNo{
margin-right: 0px;
}

.InputScale{
margin-right: 0px;
}

.InputYesNo .custom-buttons .custom-button:not(:last-child){
margin-right: 0px !important;
margin-left: 20px !important
}


/*Back Button Mobile*/
.BackButton__FooterContainer button.BackButton.custom-button{
width: 90px !important
}
.BackButton__FooterContainer {
bottom: 10px;
}



}


/*DESKTOP POP UP NATIVE*/
.Header__Logo{
margin-right: 0px !important;
margin-left: 15px
}

.msg-grid-row-container .msg-grid-row .msg-grid-left {
margin-left: .5rem;
}

.Message .message-right .MessageDate {
padding-right: 11px;
}

.Message .is-reverse{
margin-left: 40px;
}

.InputButtons{
margin-right: 80px
}

.input-small-header, .input-button{
margin-right: 8px
}
.input-button:nth-of-child(1){
margin-right: -1px !important
}


[class^=Input] .textarea{
padding-right: 50px; !important
}

/*Press enter to send*/
.input-help-text{
margin-right: 50px;
}

/*Back Button*/
.BackButton_Container{
margin-right: 100px;
}

.BackButton_Label {
margin-right: 10px !important;
}

.BackButton{
bottom: 0px !important;
}

.InputRating__button:first-child .is-rounded{

border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}

.InputRating__button:last-child .is-rounded{

border-top-left-radius: 20px !important;
border-bottom-left-radius: 20px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}



.InputScale .control:first-of-type {
border-radius: 0px 4px 4px 0px!important;
}
.InputScale .control:last-of-type {
border-radius: 4px 0px 0px 4px!important;
margin-right:-1px;
}

.social-button:last-of-type {
margin-right: 8px;
}

Please in case you find something else that needs to be adapted, please let us know

How did we do?

Get the array's index of the user selection and extract information from array

How to give unique Coupon Codes (with Google Spreadsheets)

Contact