100vh on mobile issues

HippySunshine

Senior Member
I can see across the web that 100vh causes some issues for mobile.

For example, I have a full width and height slick slider that works perfectly on mobile firefox, but on mobile safari and mobile chrome, where the UI has that slide up address bar, the slider navigation dots are below the viewport and you have to slide to see them.
I've been trying to troubleshoot this for like a full day now and my brain can't take any more.

Can anyone help? :(

This is the basic set up of my HTML:
HTML:
<div class="page <?php echo $slug?>-page">
        <section class="home-page__slidercontainer">
            <div class="home-page__slidercontainer--content">
                <div class="logo"><img src="" /></div>
                <div class="text">This is the text for the home page</div>
            </div>

            <!-- mobile slider -->
            <div class="home-page__slidercontainer--slider slider mobile-slider" data-aos="fade">
            <div class="slide slick-slide" style="background-image: url('');"><div class="overlay"></div></div>
        <div class="slide slick-slide" style="background-image: url('');"><div class="overlay"></div></div>
            </div>

            <!-- desktop slider -->
            <div class="home-page__slidercontainer--slider slider desktop-slider" data-aos="fade">
              <div class="slide slick-slide" style="background-image: url('');"><div class="overlay"></div></div>
        <div class="slide slick-slide" style="background-image: url('');"><div class="overlay"></div></div>
            </div>
        </section>
</div>

And this is my scss:
SCSS:
/* HOME PAGE ---------- */
body.home {
    background-color: $color_black_100;
    overflow: hidden;

    .site-header {
        background-color: transparent;
        z-index: 100;

        .logo {
            opacity: 0;
        }

        #slideout-bar {
            background-color: #fff !important;
        }
    }

    .site-footer {
        display: none;
    }

    #content-wrapper {
        padding-top: 0 !important;
        height: 100vh;
    }

    .home-page {
        height: 100%;

        &__slidercontainer {
            height: 100%;
            position: relative;

            &--content {
                background-color: transparent;
                width: 100%;
                position: absolute;
                z-index: 1;
                top: 50%;
                transform: translateY(-50%);
                opacity: 0;
                animation: fadeIn 2s forwards 0.2s;

                @media (min-width: $breakpoint_medium) {
                    left: 50%;
                    transform: translate(-50%, -50%);
                    height: calc(100% - 125px);
                }

                @media (min-width: $breakpoint_xlarge) {
                    height: calc(100% - 75px);
                }

                @media (min-width: $breakpoint_xxlarge) {
                    height: calc(100% - 100px);
                }

                .logo {
                    width: 70%;
                    max-width: 450px;
                    margin: 0 auto;

                    @media (min-width: $breakpoint_medium) {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    @media (min-width: $breakpoint_xxlarge) {
                        width: 633px;
                        max-width: 633px;
                    }
                }

                .text {
                   text-align: center;
                   width: 547px;
                   max-width: 547px;
                   position: absolute;
                   bottom: 31px;
                   left: 50%;
                   transform: translateX(-50%);

                   @media (max-width: $breakpoint_medium) {
                       display: none;
                   }

                   @media (min-width: $breakpoint_xxlarge) {
                       width: 770px;
                       max-width: 770px;
                       bottom: 32px;
                   }

                   p {
                       @include bookmania-light;
                       color: #fff;
                       font-size: 18px;
                       letter-spacing: 0;
                       line-height: 32px;

                       @media (min-width: $breakpoint_xxlarge) {
                           font-size: 22px;
                           line-height: 38px;
                       }
                   }
               }
            }

            &--slider {
                height: 100%;

                .slide {
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                }

                .slick-dots {
                    list-style-type: none;
                    padding: 0;
                    margin: 0;
                    display: flex !important;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: center;
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);

                    li {
                        button {
                            background-color: transparent;
                            border: 1px solid #FAF8F0;
                            border-radius: 100%;
                            height: 100%;
                            width: 100%;
                            padding: 0 !important;
                            cursor: pointer;

                            &:before {
                                display: none;
                            }
                        }

                        &:last-child {
                            margin-right: 0 !important;
                        }
                    }

                    .slick-active {
                        button {
                            background-color: #E4E4E4;
                        }
                    }
                }
            }

            .mobile-slider {
                @media (min-width: $breakpoint_medium) {
                    display: none;
                }

                .slick-dots {
                    bottom: 25px;

                    li {
                        height: 10px;
                        width: 10px;
                        margin: 0 20px 0 0;
                    }
                }
            }

            .desktop-slider {
                @media (max-width: $breakpoint_medium) {
                    display: none;
                }

                .slick-dots {
                    bottom: 52px;

                    @media (min-width: $breakpoint_xlarge) {
                        bottom: 26px;
                    }

                    @media (min-width: $breakpoint_xxlarge) {
                        bottom: 37px;
                    }

                    li {
                        height: 7px;
                        width: 7px;
                        margin: 0 14px 0 0;

                        @media (min-width: $breakpoint_xxlarge) {
                            height: 10px;
                            width: 10px;
                        }
                    }
                }
            }
        }
    }
}
 
Back
Top