Vfrdtyky

As the title says my div is getting dragged along with the finger when trying to scroll past it on the phone :/ so the background color behind it is showing.

How do I disable that?

It's not the whole div, mostly the iframe or the div the iframe is in.
But in other divs I have cards that do the same.

What causes it?

Code of one div:

<div class="Contact" id="Contact">

    <div class="normalOverlay">

        <div class="container-fluid">

            <h1 class="text-center footertext">Kontakt information</h1>

            <hr>

            <div class="row" style="padding-bottom: 40px">

                <div class="mapouter"><div class="gmap_canvas"><iframe width="100%" 

                                                                   height="400" 

                                                                   id="gmap_canvas" 

                                                                   src="https://maps.google.com/maps?q=h%C3%B6vdingagatan%2039&t=&z=15&ie=UTF8&iwloc=&output=embed" 

                                                                   frameborder="0" 

                                                                   scrolling="no"

                                                                   marginheight="0" 

                                                                   marginwidth="0">

                  </iframe><a href="https://www.crocothemes.net">crocothemes.net</a></div>

            <style>

                .mapouter {

                    text-align: right;

                    height: 400px;

                    width: 100%;

                }



                .gmap_canvas {

                    overflow: hidden;

                    background: none !important;

                    height: 400px;

                    width: 100%;

                }

            </style></div>

            @*<iframe src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=H%C3%B6vdingagatan%2039%2C%20126%2052%20H%C3%A4gersten%2C%20Sverige+(Bil2000)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" " width="100%" height="320" frameborder="0" style="border:0" allowfullscreen></iframe>*@

        </div>

        <div class="row text-center">

            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box1 pt-4">

                <a href="tel:">

                    <i class="fas fa-phone fa-3x"></i>

                    <h3 class="d-none d-lg-block d-xl-block">Telefon</h3>

                    <p class="d-none d-lg-block d-xl-block"></p>

                </a>

            </div>

            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box2 pt-4">

                <a href="">

                    <i class="fas fa-home fa-3x"></i>

                    <h3 class="d-none d-lg-block d-xl-block">Adress</h3>

                    <p class="d-none d-lg-block d-xl-block">



                    </p>

                </a>

            </div>

            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box3 pt-4">

                <a href="mailto:">

                    <i class="fas fa-envelope fa-3x"></i>

                    <h3 class="d-none d-lg-block d-xl-block">E-mail</h3>

                    <p class="d-none d-lg-block d-xl-block">



                    </p>

                </a>

            </div>

        </div>

        <div class="row text-center">

            <h5>Öppettider:</h5>

            <p class="footertext">

                Mån-tor 09.00-17.00

            </p>

        </div>

    </div>

</div>

CSS:

.Contact {

background-color: #003333;

position: relative;

height: 100vh;

padding: 0;

}

You didnt closed the div tag somewhere, the tag isnt closed so the container doesnt ends.