Revolution Fullscreen Slider

[walter]

hi there,

I use a Revolution fullscreenslider, on Desktop it is Fullscreen, the time line at the bottom is also visible, but when watching the site on a mobile phone, not everything of the slider is visible, everything of the fullscreen slider is only visible when Scrolling down.

in the Revolution slider Settings I can set that the height of the Header should be considered, then it´s correct on the mobile phones (the fullscreenslider is visible correctly), but then it isn´t Fullscreen anymore on Desktop? then on desktop the slider height of the slider isn´t the full Screen height- it´s then Screen height – Header height).

I use on Desktop the overlaying Header, Header style 3. I guess it would be correct on the mobile phone, if there the Header will also be overlaying, but initial it is fixed above the Fullscreen slider div and not overlaying. when Scrolling down on mobile phone, the Header is overlaying.

how is it possible to have a Fullscreen slider on Desktop and mobile phone? I guess the best solution is when the Header Status for Header style 3 on the mobile phone is initial the same status as when Scrolling down (then the sticky Header is overlaying the Content).

best regards

[Kyle – SUPPORT]

Hi

As you know, it’s not our plugin, we just use it with Dante. However we do our best to support it, as I did not write the code I don’t know how it works out the window height on mobile. However they method that I used was make a duplicate of the slider, but instead of setting it as window height, set as grid height.

Then add both sliders to your page, on the mobile one add the extra class visible-xs and for the desktop one add hidden-xs

So that when you get to mobile screensize it will switch to the mobile slider.

– Kyle

[walter]

hi there,

thanks for the answer.
I´ve defined the slider in the “page slider Options”
where and how in the “page slider Options” can I define 2 different sliders with classes?
I use the overlaying Header style 3

best regards

[Kyle – SUPPORT]

Instead of adding it in the page slider options and 2 rev sliders in the page builder

– Kyle

[walter]

but I guess I wouldn´t Need 2 different sliders,
I guess the Problem is the behavior of the Header itself in responsive/mobile mode.
I use the overlaying Header style 3, with opacity.
When watching the site with the slider on the mobile phone, then:
1) Initial, there is the Header in Grey (should be normally white with opacity) – I guess it´s Grey because it´s not overlaying the Fullscreen slider but it´s placed above the slider
2) as soon as I scroll minimal, the Header gets fully White (no transparency) and is now overlaying the fullscreenslider – and then I see the Header and the full height of the fullscreenslider on the Screen

I guess the Problem is the Initial Status of the Header, which is wrong for this Header type on mobile phones?

best regards

[Kyle – SUPPORT]

If you could provide me with a link and login I will look into the issue for you and try and provide a solution.

– Kyle

[walter]

This reply has been marked as private.

[Kyle – SUPPORT]

That’s because the header overlay is only for desktop, on mobile all headers are the same

– Kyle

[walter]

can I Change this with custom css?

[Kyle – SUPPORT]

Try adding this:

@media only screen and (max-width: 768px) { 
.home-slider-wrap {
  margin-top: -115px;
}
}

– Kyle

[walter]

hi there thank you for the info, will try it.
which breakpoints do you use in your theme?
best regards

[Kyle – SUPPORT]

We just use the bootstrap breakpoints 🙂 Which you can see here: http://getbootstrap.com/css/#grid

– Kyle

[walter]

hi kyle,

thank you for the code, this is a good Workaround, now it´s functioning!!

@media only screen and (max-width: 768px) { 
.home-slider-wrap {
  margin-top: -115px;
}
}

does your code means, that this css style

.home-slider-wrap {
  margin-top: -115px;

will only be executed, if the sreen size is smaller then 768px?
and if the Screen size is wider then 768 px, the home slider wrap will have its normal top margin?

best regards

[Kyle – SUPPORT]

That is correct 🙂

– Kyle