Use of Voyage Template for a website and is not user friendly on smartphone

We have used this template Voyage and has been good on the desktop for this site www.tarmactravels.com but the challenge we have now is on a mobile device the website only shows the slide banner at the top page of all the website, please see this screenshot below.

What can we do to ensure that it works on mobile devices? Will appreciate your support.

Thank you

Hello there,

I hope you are doing well today.

The content seems to appear, you can try clearing your mobile browser cache.

Best Regards,
Support

Hello,

Glad to read your reply.

We re-check it again on another two different smartphones, it was still the same. Just now, the home page just scarcely hitting the contact form below the home page while it is only the 3 banner slides that showed on the mobile phones here.

But it is working well on the desktop.

Thank you.

hello Idris

Just checked your website and need your help to better understand this problem, what i see only is a white screen between slides, you want to say you cant normally scroll to the bottom?
also, screenshot you shared is not showing your website, its from our website

Glad to read from you Noda,

The problem is this, Voyage template was used for this website www.tarmactravels.com and is seen fully on the desktop but on smartphones and tablets, only the 3 top head slides(banner) appeared without any visible part of the home page and other pages, this is another screenshot took from another mobile phone now.

From the screenshot, you can not slide down to read the content of the web page, but with force, contact form close to footer pop-up and returns to the top of the webpage as seen in the attached image.
Perhaps, there is a problem showing it on other devices aside laptop and PC, though it fits the screen size of the mobile devices yet it can not show entire webpage beyond the 3 top banners (slides) as shown in this attached image.

Will appreciate your guide.

Good evening Idris :slight_smile:

I think i know what is the cause, please use this css and let me know if it worked:

.owl-carousel.owl-drag .owl-item {
-ms-touch-action: auto;
touch-action: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}

Thank you Noda, Where do we put the css, which CSS file do we use?

Will appreciate your guide.
Appreciate your reply once more

Should it be copied in any space in style.css?

Need to ask since we have a sub-folder named css in main CSS folder.

Thank you for this guide. Await your reply.

Hi Idris,
Thanks for keeping in touch.
In this case, yes you can add the CSS code within the style.css file.

I hope this helps,
Best Regards,
Support.

Hi Idris,
Thanks for keeping in touch.
In this case, yes you can add the CSS code within the style.css file.

I hope this helps,
Best Regards,
Support.

Hi Idris,
Thanks for keeping in touch.
In this case, yes you can add the CSS code within the style.css file.

I hope this helps,
Best Regards,
Support.

Hi Idris,
Thanks for keeping in touch.
In this case, yes you can add the CSS code within the style.css file.

I hope this helps,
Best Regards,
Support.

Thank you. Will update you soon.

Hello there,

I hope you are doing well today.

It would be better to add the code to Appearance > Customize > Additional CSS and pasting it there.

Best Regards,
Support

Thank you. It is working now, we can view all the pages on from header to footer on mobile devices.

Appreciate your customer support.

Thank you.

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support