Slider Revolution set to fullscreen, but overlapped by section below it

Support
#1

I’m having trouble getting my slider to be fullscreen.

It works on desktop/laptop, but not on tablet/mobile.

To try to fix it, I played with the grid settings of the sliders while they are in Fullscreen mode (and then CSS clears etc, but I’m out of my element here)
I realized the section below the slider is overlapping the section containing the slider. On mobile and tablet, you can see that the “loading” icon appears in the correct place (center of the device’s screen).

Assuming I’ve diagnosed the issue correctly, Is there a way I can force the section below the slider to say at the bottom of the slider’s div and not overlap it?

The slider is on the frontpage of www.rudetech.com

#2

Hello Jesse,

Thanks for writing in!

It appears that you have integrated your slider into the page incorrectly. Please edit your page and remove the first section. You will need to add it in the Slider Settings: Below Masthead setting instead. To know more how you can integrate the sliders into the page, please check this out:

Hope this helps.

1 Like
#3

Dang, that was fast! Thank you so much. That fixed the problem.

Issue resolved :slight_smile:

#4

You’re welcome!
We’re glad we were able to help you out.

#5

Hey there!
Sorry, my fault. Looks like the issue was only resolved on desktop. Mobile and tablet are still being overlapped.

Here’s a screenshot on mobile:

#6

Hi Jesse,

Can you try clearing your browser cache? I am seeing differently with no overlap. Note that video height will adjust accordingly.

Can you confirm if you did update it and fixed it already?

#7

No, that was just me moving the text around in a hacky way so it didn’t look so blatantly broken.

The loading icon when you first access the page will show you the true center of the slider (it’s set to fullscreen, so it’s about in the center of the screen), and if you hold your thumb on the slider to activate the link you’ll see the “shadow” of the full slider’s height.

Is there any way I can remove this overlap below?

You can also use the console to see that the revslider div is fullscreen. I’d attach an image, but the forum will only let me use one per post.

#8

Hi Jesse,

You can specify the height of the slider on mobile. Please go to the Slider settings then enable the custom grid size.

That way, you should be able to specify the height of the slider when it is on mobile without needing to use any custom CSS.

Hope this helps.

#9

That was the very first thing I tried.

If you play with it, you’ll see that it has no effect. Plus my sliders are set to fullscreen, not fullwidth (like in your screenshot), so they should be taking up the full screen no matter what.

Here’s a video of what happens when I change those settings (cloudapp link): https://cl.ly/e3c211405b10

It seems like the slider height is being changed, but the section below it is overlapping the slider. I believe the slider is working fine. It’s the weird overlapping section that I can’t get rid of.
In fact, to make it more obvious for you, I deleted all other sections of the homepage except for the slider for now, but it’s still being overlapped by the footer.

#10

Hello Jesse,

This issue is caused by one of your custom CSS added in the child theme’s style.css
Please remove this block:

/*===== HOME =====*/
@media (max-width:800px) {
    .tp-caption.fullscreenvideo,
    .rev_slider li.tp-revslider-slidesli,
    .forcefullwidth_wrapper_tp_banner {
        height: 350px !important;
    }
}

We would love to know if this has worked for you. Thank you.

1 Like
#11

Yay! Thank you.

Now all my sliders work correctly on mobile and tablet.

Thanks for the help.

#12

We are delighted to assist you with this.

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.