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?

Detect if a visitor is on Mobile/Tablet or Desktop

How to remove Landbot branding

Contact