Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 31, 2019 at 4:42 pm #1105747
    msigner

    Hi,
    I am using 2 Fullscreen Slider on top of each other on a page. One is set to be hidden on large screens, other one is set to be hidden on small screens.

    Both sliders have “Display a scroll down arrow” on. However, when monitoring the page on desktop and mobile, only the top one is fitting to screen size and shows the down arrow icon on the position. To be more clear;

    Page Layout
    —- Fullscreen Slider 1 (Showing on desktop)
    —- Fullscreen Slider 2 (Showing on mobile)

    When I open my browser to see the page on desktop, Slider1 is shown and Slider2 is hidden as expected. When I open the page on mobile, this time Slider1 is hidden and Slider2 is shown, however Slider2 is not fit to the height of the browser on mobile and down arrow is slightly down and I have to scroll the page.

    If I change the order of Sliders as follow:
    Page Layout
    —- Fullscreen Slider 2 (Showing on mobile)
    —- Fullscreen Slider 1 (Showing on desktop)

    this time the output on mobile browser works properly. However, when I open the page on desktop, this time Slider1 does not fit to height of the browser and down arrow is slightly below, I have to scroll to see it.

    As I understood, the top slider behaves like it is trying to fit the browser, and the other one does not behave in this way.

    What should I do?

    Thank you

    June 3, 2019 at 5:37 am #1106567
    Ismael

    Hey msigner,

    Thank you for the update.

    This css code should force the slider to inherit the height of the view port.

    @media only screen and (max-width: 767px) {
    .avia-fullscreen-slider .avia-slideshow {
        max-height: calc(100vh - 80px);
    }
}

    Please remove the browser cache prior to checking the page.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.