Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Leanne D
Leanne D
4,550 Points
Posted by Leanne D
Leanne D
4,550 Points

100vh on mobile causing scroll

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: <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: .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;
                    }
                }
            }
        }
    }
}

}

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

Yeah I have ran into this problem as well and there are a few suggestions that I have seen and you will probably just have to see which one works best. The most proven way is to set the containers height with JS. Setting an element equal to window.innerHeight + px might work, or setting min-height to -webkit-fill-available.

This is an older thread on stack overflow that explains it a little better and has more solutions. https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser.

1 Answer

Leanne D
Leanne D
4,550 Points
Leanne D
Leanne D
4,550 Points

Thanks Blake, that worked a treat :D Very helpful