Rev Slider Loading everytime homepage

Support
#1

Hi,

I have been updating my client’s website having switched them over from X to PRO.

The homepage has a Rev Slider at the top just below the menu bar. I’m trying to set it so there’s a placeholder image that’s the same as the first slide so the section doesn’t stay collapsed until the slider finally loads.

How do I do this? I can’t seem to work it out?

Thanks,
Darren.

#2

Hi Darren,

Thank you for writing in, please add this to your Section’s Element CSS area.

$el.x-section {
	min-height: calc(100vh - 212px);
}

Hope it helps,
Cheers!

#3

Hi,

This definitely looks like its the right way to go but it sets the min height of the Section way too big. Can you please explain how you came to min-height: calc(100vh - 212px)?

Thanks.

#4

Hi Darren,

Sorry for not explaining it. Ok, the purpose of min-height: 100vh there is to make the first section occupy the entire height of the screen (above-fold), regardless of how big the screen is (desktop, laptop, mobile).

Using vw and vh

But we need to offset the height of the header from that 100vh so we did use the calc() CSS function to do that. So the 212px there is the height of your entire header (logobar & menu bar). That is why we come up with this:

$el.x-section {
	min-height: calc(100vh - 212px);
}

What that does is to make sure the header and the first section occupy the above the fold regardless if your slider is there or not.

But that min-height is only initial though, because eventually when slider loads the height of the first section will respond to the height of the slider.

Or if your slider has a fixed height, you can actually use that value to be the min-height of the section.

Hope that shed some lights,
Cheers!

#5

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