As you can see in my image Overlapping issue, the footer is overlapping an image and when I set in CSS this:

@media (max-height:800px) {
    footer {
        position: static;
    }
}

then the footer just disappears under the height of 800px. Maybe someone knows how I can fix this issue.

HTML
<footer >

      <div >
                <i ></i>
                <p><a href="tel:040 646 03-0">040 646 03-0</a> <br>
                <span>Rufen Sie uns an.
                  <br> Montag bis Freitag 9 bis 18 Uhr (außer an Feiertagen)
                </span>
                </p>
      </div>

      <div >
            <div>
                <i ></i>
                <p><a href="mailto:[email protected]">[email protected]</a>
                <br>
                Schreiben Sie uns.</p>
            </div>
        </div>
        <div >
            <div>
                <i ></i>
                <p> <a href="https://www.google.com/maps/dir//Filiale Hamburg Bramfelder Chaussee 101/@51.1758057,10.4541194,6z?hl=de" target="_blank">Filiale Hamburg <br>
                Bramfelder Chaussee 101 </a></p>
            </div>
        </div>
    </footer>

CSS
footer {
    position: fixed;
    bottom: 0;
}

@media (max-height:800px) {
    footer {
        position: static;
    }
}

.footer {
    background-color: #5A0035;
    box-sizing: border-box;
    width: 1400px;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 50px 50px 60px 50px;
    margin-top: 80px;
}

/* Left */

.footer .footerl, .footer .footerc, .footer .footerr {
    display: inline-block;
    vertical-align: top;
}

.footer .footerl {
    width: 35%;
}

.footer .footerl i {
    background-color: #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer .footerl p {
    display: inline-block;
    color: #ffffff;
    margin: 0;
    font-size: 20px;
    vertical-align: middle;
    font-weight: 600;
}

.footer .footerl p span {
    display: block;
    font-weight: normal;
    font-size: 14px;
    line-height: 2;
}

.footer .footerl p a {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    transition: color 500ms;
}

.footer .footerl p a:hover {
    color: #E6323C;
    transition: all 500ms;
}


/*Center */

.footer .footerc {
    width: 30%;
}

.footer .footerc i {
    background-color: #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer .footerc i.fa-envelope {
    font-size: 17px;
    line-height: 38px;
}

.footer .footerc p {
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin: 0;
}

.footer .footerc p a {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    transition: color 500ms;
}

.footer .footerc p a:hover {
    color: #E6323C;
    transition: all 500ms;
}

/* Right */

.footer .footerr {
    width: 30%;
    /* border-left: solid 2px #aaa; */
}

.footer .footerr i {
    background-color: #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer .footerr p {
    display: inline-block;
    color: #fff;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    vertical-align: middle;
}

.footer .footerr p a {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    transition: color 500ms;
}

.footer .footerr p a:hover {
    color: #E6323C;
    transition: all 500ms;
}

@media (max-width: 1400px) {
    .footer {
        width: 100%;
    }
    
}

@media (max-width: 1000px) {
    .footer .footerl, .footer .footerc, .footer .footerr {
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }
    .footer .footerc i {
        margin-left: 0;
    }

    .footer {
        width: 100%;
    }
}

CodePudding user response：

The footer position is fixed try to change position relative or you can set margin to last section

footer { position: relative; }

CodePudding user response：

You can use position: fixed; bottom: 0; to fixed the footer at the bottom of the page. Also, use margin-bottom or padding-bottom same height as footer height to its previous element.