Table of Contents

Landbot v3 - Web CSS - RTL

Pau Sanchez Updated by Pau Sanchez

If 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.04 Last update 19th April 2021 (Spacing in text input)

body{
direction:rtl
}
.Footer, .social-button{
direction:ltr !important
}
.Header__Logo{
margin-right: 0px !important;
margin-left: 15px  
}

/* Buttons */
.card-content{
  direction: rtl;
}
.card-footer{
  direction: rtl;
}
  .input{
  right: 9px!important;

}
.input-icon-send-button{
transform: rotate(180deg)!important;

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

/* End Buttons */
/* Input */

.InputNumber{
  direction:rtl !important;
  width: 320px!important;
}
.input-icon-send-button{
transform: rotate(180deg);
}
.InputFile{
margin-right: 155px;
}

.InputYesNo{
margin-right: 155px;
}

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

.InputScale{
margin-right: 155px;
}
.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;
}

.InputButtons{
margin-right: 80px
}

.input-small-header, .input-button{
margin-right: 8px
}
.input-button:nth-of-child(1){
margin-right: -1px !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;
}
/*Press enter to send*/
.input-help-text{
margin-right: 50px;
}
/*End Input */

/*Change direction of message bubble */

.MessageBubble{
border-radius: 0.75rem 0.75rem 0.125rem 0.75rem!important
}

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


.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;
}

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

/*Back Button*/
.BackButton_Container{
  margin-right: 100px;
}
.BackButton_Label {
    margin-right: 10px !important;
}
.BackButton{
bottom: 0px !important;
}
.social-button:last-of-type {
  margin-right: 8px;
}

/*MOBILE - LIVECHAT*/
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
  
.buttons .button:last-child {
    margin-right: 0.5rem !important;
}
  
.is-layout-vertical .input-button:nth-of-type(odd) {
    margin-right: 0.5rem !important;
}
  
.is-layout-vertical .input-button:last-child {
    margin-right: 0.5rem !important;
} 
  
 
  
.is-image-button:not(.is-flex-direction-column) .input-button-label {
    max-width: 200px !important;
}
  
  

.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*/
  .input{
  right: 9px!important;

}
  .InputNumber{
direction:rtl !important;
  width: 60vw!important;
}
.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;
}



}/*End Mobile View */

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

How did we do?

Proactive Message Customizations with Javascript and CSS

Multi Questions CSS

Contact