Docs

[charlescthomson]

Hi,

I’m having an issue getting the full screen functions of slider revolution to work. I’d like to have a full screen slider that takes up the entire screen (with a transparent header) and removes the scroll bar. So far, I’ve included .masthead and made a slight % adjustment of -9%.

I’ve also included the following custom css:

.x-slider-container.below {
border-bottom: 0px;
}

However, I am still getting a white line appearing below the slider.
Any thoughts?

Cheers!

[Darshana]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[charlescthomson]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove -9% from slider settings, then we’ll help you to move slider to top with CSS.

Thanks.

[charlescthomson]

No problem – done!

Thanks

[Rue Nel]

Hello There,

I went ahead and edited your slider I remove ‘.masthead’ in the offset container option. Right now it is already fullscreen and no scrollbars on the page.

Hope this helps. Kindly let us know.

[charlescthomson]

This reply has been marked as private.

[Paul R]

Hi,

I checked your site in three different browsers and didn’t see any white space under the slider.

Kindly clear your browser cache and check again.

Thanks

[charlescthomson]

Hi,

Cleared: unfortunately, no change. I have also checked in 3 different browsers – Chrome, Firefox, Explorer.
I’ve also used different devices with varying monitor sizes. Still having this issue.

Hopefully you have another suggestion!

Cheers,

[Rupok]

Hi there,

Thanks for updating. I can see the space and it’s causing by your below custom CSS :

.x-slider-container {
  margin-top: -90px;
}

You need to remove this to get expected result.

Cheers!

[charlescthomson]

Hi – Unfortunately, by removing that custom CSS line the slider no longer displays behind the transparent header. I’d like to have the image remain behind the transparent header, extend full screen, and not require a scroll bar to see the entire image.

Again – I’d like to mimic the slider behaviour of this site: wallop.ca

Is this possible? There must be a way!

Cheers,

[Jade]

Hi Charles,

Please try to add this CSS:

.forcefullwidth_wrapper_tp_banner,
.tp-revslider-mainul,
.rev_slider_wrapper {
    height: calc(100vh + 90px) !important;
}

Hope this helps.

[charlescthomson]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. You can try updating your code to following :

.forcefullwidth_wrapper_tp_banner, .tp-revslider-mainul, .rev_slider_wrapper {
  height: calc(100vh + 30px) !important;
}

Hope this helps.

Cheers!

[Author]

Posts