Can I display accommodation types listing in a grid view?

[Ian West]

I’m listing accommodation types using mphb_rooms. Can I display results as grid – if so, how? CSS class?

[J. Davis]

Hi Ian,

Thanks for your question. You may use the following style:

@media(min-width:1024px){
.mphb_sc_rooms-wrapper {
    margin-top: 0 !important;
    display: flex;
    flex-wrap: wrap;
}

.mphb_sc_rooms-wrapper .mphb-room-type {
    width: 33%;
    padding: 0 0.5em;
    margin-top: 0 !important;
}
}

You may change the width value and add other style attributes to adjust it to your needs.

Best regards,
J. Davis

[Lucía Somolinos Novella]

Hi! This topic helped me a lot too but I would like to go one step further: is it any way of showing a specific number of random accommodations? I’m doing a booking center for a region and I would like to show -for example- 6 random accommodations of this area. Is it possible? How can it be done? Thanks in advance!

[Andre Flores]

Hello Lucia,

You may add ids=”” parameter to the shortcode and list 6 random accommodation type ID’s there to have them displayed, e.g.:

[mphb_rooms ids="12,25,34,47,53,68"]

Where “12,25,34,47,53,68” are your accommodation type ID’s.

Regards,
Andre

[Lucía Somolinos Novella]

Thanks for your answer, Andre.
I already have thought of that chance, but this wouldn’t show RANDOM accommodations, but always the selected ones.
The thing is I’m working on a site for several accommodations and I would need to show RANDOMLY a group of 6 between 45. Is there any way to do it?
In that case you tell me, I would need to change the code manually everytime to show a different group of 6 when I visit the page.

Regards,
Lucía

[Andre Flores]

Hello Lucía,

I am sorry for the misunderstanding. You may achieve this by adding posts_per_page and orderby parameters to the shortcode, e.g.:

[mphb_rooms posts_per_page="6" orderby="rand"]

You might also want to get rid of the pagination, in this case add the following code under Appearance ->Customize ->Additional CSS:

.navigation.mphb-pagination.pagination {
	display: none;
}

Regards,
Andre

[Lucía Somolinos Novella]

Thank you so much, Andre.
It works great!

[Andre Flores]

Hello Lucia,

You are most welcome! It would be very much appreciated if you leave your positive feedback about the Hotel Booking plugin at: https://motopress.com/products/hotel-booking/#edd-reviews-respond.

Thank you in advance!

Regards,
Andre

[Ahmed Hassanin]

Good afternoon
Can you please explain more how i can make it with short code
Thanks a lot

[J. Davis]

Hello Ahmed,

You should simply add the code from the reply #1020791 to the Appearance > Customize > Additional CSS. Then the list of accommodation types (added by shortcode) will be adjusted to the grid view.

best regards,
J. Davis

[Author]

Posts