Align hotelrooms to center on homepage

[Mariska88]

Hi Courtyard-team & Rabindra,

I love your theme (thank you!), but I have one problem I can’t solve myself.

My site only uses 2 ‘hotel rooms’, and because of that, they don’t align to the center on my homepage. As you can see here at ‘Tracking Packages’: http://chiangdaotrekking.com/ .

I tried custom CSS, which worked in Firebug, but somehow it still didn’t work.

I appreciate your help, thanks!

With kind regards,

Mariska

[Rabindra Tharu]

Hi, Mariska

Well, you can make it by CSS code. As is it slider we have passed the no of slidesPerView in js file. Please create a child theme and change the custom js for the room slider.

jQuery('.pt-rooms-section').each(function(index, element){
            var container           = jQuery(this).find('.pt-rooms-slider');

            var pt_rooms_slider = new Swiper(container, {
                spaceBetween: 30,
                preventClicks: false,
                slidesPerView: 3, // Change Here and make it as 2
                slidesPerColumn: 1,
                touchEventsTarget: 'swiper-wrapper',
                speed: 800,
                navigation: {
                    nextEl: container.find('.pt-more-arrow .pt-arrow-right'),
                    prevEl: container.find('.pt-more-arrow .pt-arrow-left')
                },
                breakpoints: {
                    992: {
                        slidesPerView: 3 // Change Here and make it as 2
                    },
                    768: {
                        slidesPerView: 2
                    },
                    576: {
                        slidesPerView: 1
                    }
                }
            });
        });

Info:- Please check this tutorial how to edit js file by child theme in WordPress.

Let us know if this helps or need more help please do reply.

Thanks!

[Author]

Posts