Footer is not being responsive

Question

I made a website and the rest is responsive, no problem at all. But, my footer, it’s getting over other elements when I go to test on smaller screens.

HTML:

<footer class="footersection" id="aboutus">
                <div class="container">
                  <div class="row">

                    <div class="col-lg-4 col-md-6 col-12 footer-div">
                      <div>
                    <h3>SOBRE A EMPRESA</h3>
                    <p>Lorem ipsum enim lobortis consectetur quis congue 
                    fames quis suspendisse torquent imperdiet orem ipsum 
                    enim lobortis consectetur quis congue fames quis 
                    suspendisse torquent imperdiet</p>
                  </div>
                </div>

                <div class="col-lg-4 col-md-12 col-12 footer-div text-center">
                  <div>
                <h3>LINK DE NAVEGAÇÃO</h3>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Sobre Nós</a></li>
                <li><a href="#">Contatos</a></li>
                <li><a href="#">Serviço</a></li>
                <li><a href="#">Preço</a></li>
              </div>
            </div>

            <div class="col-lg-4 col-md-6 col-12 footer-div">
              <div>
            <h3>SOBRE A EMPRESA</h3>
            <p>Lorem ipsum enim lobortis consectetur quis congue 
            fames quis suspendisse torquent imperdiet orem ipsum 
            enim lobortis consectetur quis congue fames quis 
            suspendisse torquent imperdiet</p>
          </div>
        </div>

        <div class="mt-5 text-center">
          <p class="text-center"> ©2020 Todos os direitos reservados</p>
        </div>

      </footer>

CSS:

.footersection{
    width: 100%;
    height: auto;
    padding:70px 0 20px;
    background: #00abff;
    position: absolute;
}
.footersection p{
    color:#fff;
}
.footersection li a{
    font-size: 1.0rem;
    line-height: 1.6;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
}
.footersection h3{
    text-transform: uppercase;
    color:#fff;
    margin-bottom: 25px;
    font-size: 1.2rem!important;
    font-weight: 600;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

Answer 1

It is on top because of position:Absolute, one thing you can do is declare a min-height:90vh; in the element where your content is, previous to the footer, there whenever your page does not have enough content to occupy the screen your footer always stays at the bottom of the page and does not go up to the middle of it. The height size I put 90 of example, can change according to the height of your footer

Answer 2

Try to remove the

position: absolute