How to change room gallery
The room gallery is located in app > rooms.html
<ul id="easyPaginate" class="rooms hg-catalog-4-column">
This is the code that starts the room gallery.
The id "#easyPaginate"
triggers the script to paginate the images. The script is located at the bottom of the rooms.html page
<script type="text/javascript"> $(function() { $('#easyPaginate').easyPaginate({ paginateElement: 'li', elementsPerPage: 8, effect: 'default', firstButton: 'false', firstButtonText: '', lastButton: 'false', lastButtonText: '', prevButtonText: 'PREVIOUS', nextButtonText: 'NEXT', }); }); </script>
Here you can modify the text for buttons and elements for the page.
The style of the page is found in app/style/scss/_grid-catalogue.scss
The class hg-catalog-4-column
is added so that on the desktop and laptop the layout would be 4 columns.
.rooms.hg-catalog-4-column { .rooms__item { width:25%; margin:0 auto; margin-bottom: 50px; @include max_mobile { width: 100%; } @include mobile_tablet { width: 50%; } } }
If you would like an other number of columns then add additional classes width different percentage for .room__item
width.