Revolution Slider fullscreen

[Brainfire]

Hi APEX

I have a revolution Slider on my Homepage set to Fullscreen. As everything is fullscreen on the whole Website I thought this is also ok for the slider, but now it is under the right menu sidebar. Somehow it takes its own size instead of the Container on the left of the right menu sidebar as the rest (texts, pics, etc.). i tried «content left, sidebar right, and other things but notzning helped). I could set the z-Index higher so that the Slider is on top but then there is no Menu and it looks weird.

I just want to have it fullscreen leftside of the menu sidebar, so that we can see the whole slider including the right button to go to the next slide.

How can I manage this?

Thanks, Patric

[ruenel]

Hello Patric,

Thanks for writing in! Once you set a slider as fullscreen, it will adjust itself and display in the whole browser screen. If you want it to adjust horizontally, please enable the “Disable Force FullWidth”.

It can be found in Slider Settings > Slider Layout.

Please let us know if this works out for you.

[Brainfire]

Hi RueNel

I already tested that, but then it will limit the «fullscreen» slider to the set Website width - in my case 1400px, which is not fullscreen anymore - only when scaling the browser Window to exactly 1400px. But when whatching the Website on big screens, there is always a gap left and right from the slider. I think I have something to do with CSS but don’t know where.

I would be very glad if you could help me. my problem can be seen here: http://brainfire.ch.kosmos.ch-meta.net/

Thanks, Patric.

[rad]

Hi @Brainfire,

My screen has 1920px width and the slider appears full-screen and full-width. Would you mind providing a screenshot of what you’re getting? Or maybe you wish the slider doesn’t appear under the header (sidebar)?

Thanks!

[Brainfire]

Hi Rad

Yes, it is actually fullscreen. If you read all of the conversation you know what I mean. I just tried what RueNel told me to test and then it wasn’t fullscreen. Now I un-checked the «Disable Force Fullscreen» again and it is fullscreen again. BUT is has to be fullscreen MINUS the Header/sidebar so that you can see the whole Slider with the right arrow bullet Button as well. Now it’s under the right sided Menubar…

So if I have to describe the CSS: the Slider has to be fullscreen MINUS the width of the menubar, left aligned.

Can you give me a hint? Thanks
Patric

[rad]

Hi @Brainfire,

Sorry for the confusion, I didn’t said it’s not full-screen. What I said is it’s full-screen and displaying in full-width on my end, which means it works okay.

And that’s I wanted to confirm, a slider that doesn’t overlap with the header (sidebar). In that case, please add this CSS to your global custom CSS.

@media ( min-width: 980px ) {
.fullscreen-container {
    width: 100% !important;
}
}

Thanks!

[Brainfire]

@Rad

@media ( min-width: 980px ) {
.fullscreen-container {
width: 100% !important;
}
}

Hey Rad, you are genius!!! Thanks a lot. Now it doesn’t fit the small screen sizes. It is too high, the picture with the scroll down Icon (Mouse with dancing point) are too much at the buttom and almost not clickable.

Is there a solution that also the height fits in perfectly?
Thanks, Patric

[Alaa]

Hi Patric,

Sorry but I don’t fully understand what do you mean, could you please share some screenshots showing this issue? perhaps the devices screen sizes/models as well.

Thanks.

[Brainfire]

https://www.dropbox.com/sh/tdb5qmubj6ntihk/AAAqsuyLR9LOFkNj9crxxS8ya?dl=0. Hi Rad and Alaa, thanks a lot but i cheerished too early - it’s worse than before… Not it doesn’t fit the smartphones and the big screens like iMac, as you can see in the screenshots.

Thanks for helping me on.

Patric

[christian]

Hey Patric,

There’s no screenshot in the link you posted.

The big screen (iMac Retina) view looks fine on my end.

Still looks ok in laptop though you will need to work on your grid size since the scroll button and text are overlapping.

A bit ok in tablet:

And, scroll button is hidden below the fold in mobile.

If you want your slider to take into account the height of the header or other elements. Put the element’s class in Increase/Decrease Fullscreen Height like this.

Pro’s header class is .x-masthead.

For more details about that option, please see https://www.themepunch.com/revslider-doc/slider-setup/#slidelayout

I would also strongly recommend that you watch the Responsive Tutorial series by ThemePunch at https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/. That is so you could understand the intricacies in creating a responsive slider.

Thanks.

[Brainfire]

Wow! Thanks Christian you are just wonderful!
Thanks Patric

[Prasant]

You are most welcome.