Дизайн формы бронирования и виджета бронирования можно изменять с помощью CSS-стилей. Стили для формы бронирования прописываются в коде сайта, на котором устанавливается форма бронирования, стили виджета бронирования прописываются в разделе "Настройки - Модуль бронирования - Коды форм", в поле "Правила CSS для модуля бронирования".

Горизонтальная форма бронирования

Пример css-стилей для горизонтальной формы бронирования:

<style>
#litepms .widget-form {text-align: center; line-height: normal; padding: 30px 0 35px; box-shadow: 0px
0px 5px 1px rgba(0, 0, 0, 0.2);margin-bottom: 10px;}
#litepms .widget-form .title, #litepms .widget-form .litepms-datein, #litepms .widget-form .litepms-dateout, #litepms .widget-form .litepms-submit { display: inline-block; margin: 0 20px;vertical-align: bottom;}
#litepms .widget-form .title {font-size: 18px; text-transform: uppercase;margin-bottom: 10px;}
#litepms .widget-form label { font-size: 12px; text-align: left}
#litepms .widget-form .input.date {font-size: 16px; height: 40px; }
#litepms .widget-form .submit {height: 40px; text-transform: uppercase;}
@media only screen and (max-width: 880px){ #litepms .widget-form .title {display: block;} }
@media only screen and (max-width: 600px){
#litepms .widget-form .litepms-submit {display: block; margin-top: 10px;}
#litepms .widget-form .litepms-datein, #litepms .widget-form .litepms-dateout {width: 50%; margin: 0; padding: 0 20px; text-align:left;}
#litepms .widget-form .input.date {width: 100%}
#litepms .widget-form .submit {width: 100%}
}
@media only screen and (max-width: 420px){
#litepms .widget-form .litepms-datein,
#litepms .widget-form .litepms-dateout {
width: 100%; margin-bottom: 10px
}
}
</style>

Код необходимо вставить сразу после кода формы бронирования. Посмотреть пример https://litepms.ru/demo/index2.html

Список номеров в две колонки

Пример css-стилей для отображения списка номеров в модуле бронирования в две колонки с большими фотографиями

.widget-list .date-form { margin-bottom: 20px; }
.date-form form {display: grid; grid-gap: 15px; grid-template-columns: repeat(4,1fr);}
.widget-list .date-form .form-row { display: flex;flex-flow: column;margin:0;}
.widget-list .date-form .form-row .input, .widget-list .date-form .form-row .submit {height: 42px !important; width: 100% !important;}
.widget-list .date-form .submit-input {align-self: flex-end;}
.widget-list-room {display: grid; grid-gap: 20px; }
.room-item:first-child {padding-top: 10px; border: 1px solid #dfdfdf;}
.room-item {border: 1px solid #dfdfdf; border-radius: 10px; margin: 0; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);}
.room-item .col1, .room-item .col2, .room-item.multirate .col1, .room-item.multirate .col2 {float: none !important; width: auto !important;}
.room-item .room-photo, .room-item .room-info {float: none; width: auto;}
.room-item .room-photo-inner {padding-right: 0}
.room-item .room-photo-wrap {height: auto; max-height: none;}
.room-item .room-photo img {height: 100%; width: 100%; object-fit: cover; object-position: 0 100%;}
.room-item .room-info {margin-top: 15px;}
.room-item .room-title { font-size: 1.7em; }
@media only screen and (min-width: 850px){
  .widget-list-room {grid-template-columns: 1fr 1fr;}
  .room-item .room-photo-wrap {height: 300px;}
  .room-item .room-photo img {height: 100%; width: 100%;}
}
@media only screen and (max-width: 750px){
  .date-form form {display: inline}
  .widget-list .date-form .form-row {display: block;}
	.widget-list .date-form .datein-input, .widget-list .date-form .dateout-input { display: block; float: left; width: 50%; margin-right: 0; }
	.widget-list .date-form .datein-input {padding-right: 10px;}
	.widget-list .date-form .dateout-input {padding-left: 10px;}
	.widget-list .date-form .form-row .input.date, .widget-list .date-form select.input, .widget-list .date-form .calendar-input input { width: 100%; max-width: none; }
	.widget-list .date-form .person-input, .widget-list .date-form .children-input, .widget-list .date-form .cat-input, .widget-list .date-form .submit-input, .widget-list .date-form .calendar-input { display: block; margin-right: 0; clear: both; }
	.widget-list .date-form .person-input *, .widget-list .date-form .children-input *, .widget-list .cat-input * { width: 100%; }
	.widget-list .date-form .submit-input input, .widget-list .date-form .calendar-input input { width: 100%; }
}
@media only screen and (max-width: 360px){
.widget-list .date-form .datein-input, .widget-list .date-form .dateout-input {width: 100%; padding: 0}
}

Код необходимо вставить в настройках модуля бронирования (Настройки - Модуль бронирования) на закладке "Коды форм" в поле "Правила CSS для модуля бронирования". Посмотреть пример https://litepms.ru/demo/index3.html