How to enable list view for the Accommodation Types Listing?

The Accommodation Types Listing is used to show the list of public accommodation types on your website.  It is added by shortcode [mphb_rooms], or Accommodation Types Listing block(Elementor widget, or Divi module). By default, the accommodation types are placed one by one vertically in one column with all the information underneath (gallery/image, title, excerpt, details, price, view details button, and book button). 

You may follow the steps below to set up the list view for the Accommodation Types Listing - the image/gallery is on the left, and all other information is on the right:

1. add the following code to the functions.php file of your active theme to wrap the image/gallery and the information elements (title, description, details, buttons) into different divs:

add_filter ('mphb_sc_rooms_item_top','theme_wrap_image_sc_rooms_item_top');
function theme_wrap_image_sc_rooms_item_top(){
echo '<div class="theme-room-type-images-wrapper">';
}
add_filter ('mphb_sc_rooms_render_title','theme_wrap_info_sc_rooms_render_title', 9);
function theme_wrap_info_sc_rooms_render_title(){
echo '</div>';
echo '<div class="theme-room-type-info-wrapper">';
}
add_filter ('mphb_sc_rooms_item_bottom','theme_wrap_info_mphb_sc_rooms_item_bottom');
function theme_wrap_info_mphb_sc_rooms_item_bottom(){
echo '</div>';
}

2. add the style below to Appearance > Customize > Additional CSS (or the style.css file of the child theme):

@media(min-width:1024px){
.mphb_sc_rooms-wrapper.mphb-room-types .mphb-room-type {
display:flex;
flex-direction:row;
}
.mphb_sc_rooms-wrapper.mphb-room-types .mphb-room-type > div{
width:50%;
}
.mphb_sc_rooms-wrapper.mphb-room-types .mphb-room-type .theme-room-type-images-wrapper{
padding-right:1.5rem;
}
}

Feel free to extend the code above, adding your custom styles, adjusting width, padding, margin, or adding a border, etc.