Search code examples
htmlcssfooterremoving-whitespace

How to remove blank white space below footer?


I tried to eliminate the white space according to the answered questions that I found. But not of them is working on my side.

I tried to remove the padding in div's footer, but still the white space still there.

How to fix this?

enter image description here

CSS:

footer #bottom-footer{ background: url(/files/bg-testimonials.jpg) no-repeat; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.52); color: #000; text-align: left; padding: 50px 0 50px 0; font-size: 0.8125em; font-family: 'Open Sans', sans-serif; font-weight: 600; letter-spacing: normal; position: relative; left: 0; bottom: 0; height: auto; width: 100%; }
.footer-wrap a{ color: #000; }
.footer-wrap a:hover{ color: #d31716; }
.footer-logo a{ margin-bottom: 6px; display: block; }
.footer-socials{ float: none; line-height: 0; text-align: center; padding: 1em 0 2em;}
.footer-socials a{ border-radius: 100%; border: 3px solid #FFF; color: #FFF; display: inline-block; font-size: 1.25em; line-height: 2.50em; margin-left: 0.1em; text-align: center; vertical-align: middle; width: 2.50em; height: 2.50em; }
.footer-socials .social-icons span{ cursor: pointer; display: inline-block; }
.footer-socials .socials i{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.tagcloud a{ font-size: 13px !important; background: rgba(0,0,0,0.4); padding: 8px 10px; margin: 0 2px 4px 0; display: inline-block;  line-height: 1; }
.sidebar .tagcloud a{ background: #23A38F; color: #FFF; }
.bottom-menu{ float: right; margin: 1em 4em 0 0; }
.bottom-menu ul{ list-style-type: none; font-size: 1.1125em; }
.bottom-menu ul li{ display: inline-block; font-family: 'Open Sans', sans-serif; font-weight: normal; line-height: 1.8; border-radius: 5px; border: 1px solid #CCC; box-shadow: 0 0 2px rgba(0,0,0,0.3); padding: 1em; margin: 0 0.10em 0 0; background: #FFF; color: #3e3e3e; }
.footerimg{ width:6em; }
.copyright{ margin: 2em 0 0 4em; }
.copyrighttext{ font-size: 1.08em; font-weight: 600; color: #B3B3B3; margin: 0 0 0 0.50em; }
#imgv ul{ list-style-type: none; letter-spacing: 1px; margin-top: -20px; font-size: 0.75em; }
#imgv ul li{ display: inline; }
.social-footer-mobile{ display: none; }
.footer-vertical-line{ border-top: 1px solid #8c8b8b;width: 9em; vertical-align: middle; position: relative; }
.left{ left: 32.50em; top: 1.65em; }
.right{ right: 32.50em; top: -1.45em; float: right; }

HTML:

<div id="bottom-footer" class="footer-menu">
    <div class="ak-container">
    <div class="footer-wrap clearfix">
        <div class="footer-socials clearfix">
        <div class="footer-vertical-line left"></div>
            <div class="socials">
        <a href="#" class="facebook" title="Facebook" target="_blank"><span class="font-icon-social-facebook"></span></a>
        <a href="#" class="twitter" title="Twitter" target="_blank"><span class="font-icon-social-twitter"></span></a>
        <a href="#" class="youtube" title="Youtube" target="_blank"><span class="font-icon-social-youtube"></span></a>
        <a href="" class="linkedin" title="Linkedin" target="_blank"><span class="font-icon-social-linkedin"></span></a>
        </div>
                <div class="footer-vertical-line right"></div>
        </div>

        <div class="footer-columns-4">
            <ul>
                <li>Products</li>
                <li><a href="#" title="All Products">All products</a></li>
                <li><a href="#" title="Standard loan">Standard loan</a></li>
                <li><a href="#" title="Promo loans">Promo loans</a></li>
                <li><a href="#" title="Promo loans">Insurance for loans</a></li>
            </ul>
            <ul>
                <li>About Loans</li>
                <li><a href="#" title="How to apply">How to apply</a></li>
                <li><a href="#" title="Our partner stores">Our partner stores</a></li>
                <li><a href="#" title="Terms &amp; Conditions">Terms &amp; Conditions</a></li>
                <li><a href="#" title="Safety guarantee">Safety guarantee</a></li>
            </ul>
            <ul>
                <li>For Customers</li>
                <li><a href="#" title="Financial literacy">Financial literacy</a></li>
                <li><a href="#" title="Payments &amp; Guidelines">Payments &amp; Guidelines</a></li>
                <li><a href="#" title="Menu">Menu</a></li>
                <li><a href="#" title="FAQ">FAQ</a></li>
            </ul>
            <ul>
                <li>Title</li>
                <li><a href="#" title="About us">About us</a></li>
                <li><a href="#" title="News">News</a></li>
                <li><a href="#" title="Careers">Careers</a></li>
                <li><a href="#" title="Contacts">Contacts</a></li>
            </ul>
        </div>

        <nav role="navigation">
        <div class="bottom-menu">
            <ul class="footer-desktop-version">
                <li><span class="footer-icon-cs icon-icon-support"></span>Customer Service: <strong>11111111</strong></li>
            <li><span class="footer-icon-cs icon-icon-collection"></span>Collections <strong>1111111</strong></li>
            </ul>
        </div>
        </nav>

        <div class="copyright">
        <img src="/files/footer.jpg" class="footerimg"><span class="copyrighttext"> All Rights Reserved ® 2017 
            Company Name</span>
        </div><!-- .copyright -->
    </div><!-- .footer-wrap -->
                    </div>
        </div>

Solution

  • Your code shows nothing, perhaps you can't reveal your web address no problem. You need to check something in your html any div or content area have minus value like top:-100px if you set something like this you need to change like margin-top:-100px