How to display only landing page on mobile devices

Support
#1

Hello,

I am using X Theme Gym Extended Demo with Slider Revolution. The top slider is my “Landing Page” and the second slider under it is the “Home Page”.
See: jiujitsuroswell.com

I want the user to see only the Landing Page on mobile devices (mobile, tablet), the same way as it displays on PC or laptop. I have attached a screenshot on how the Landing Page and Home Page both show on a mobile phone screen. I do not know why this happens:

How can I fix this and show only the Landing Page on mobile devices?

Thanks!

#2

Hi there,

The problem with the way you want the slider show is that the aspect ratio of desktop and mobile are not the same. The slider tries to reduce the height to accomodate the width properly with the aspect ratioi of the content you have in the slider.

But that will force the slider be too short as the width of the mobile devices are small and it tries to keep the aspect ratio.

You need to hide the first slider for mobile view and ad another element instead. To hide based on the viewport you can check the sections options:

Another not perfect alternative is to force the slider to be full height by adding the code below to X > Launch > Options > CSS:

#rev_slider_5_1_wrapper,
#rev_slider_5_1 {
    height: 100vh !important;
}

But the code can not force the video to be full height.

Thank you.

#3

Thank you for sending the options. I added the code in the CSS and it looks better. However, I have 3 questions to further improve how the landing page displays on mobile devices:

  1. How can I adjust the width? Now the mobile shows full height but only part of the width. I assume that we could add some CSS code to make the landing page wider on a mobile? I may not want to make it 100% but wider than it is now. See the attached image taken from a mobile phone screen.

  2. The text elements on my Landing Page slider do not display in the middle of the page as they should. Please compare how they display on a PC screen and see the attached image taken from a mobile phone screen. How can I get the mobile

  3. How can I add a “Play Video” button on the landing page, so that the user could - optionally -
    play the video via YouTube?

Thanks!

#4

Hi there,

Please try to add this code in the custom CSS:

.tp-bgimg.defaultimg {
        background-size: 60% 60% !important;
}

Please refer to this link about the videos on mobile.