Footer has too many white spaces when I change the background color

I am doing a page footer for my web. The problem is that my footer shows those huge white spaces, I tried putting a white background to hide that but the client wants a grey background in the footer so I can't really hide the mistake anymore. Any idea how can I fix it? I am using Bootstrap with Vue JS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div>
    
    <div class="container">
        <div class="row">
            <div class="column">
                <a href="#"><img src="" alt="BCV" style="width:75%"></a>
            </div>
            <div class="column">
                <a href="#"><img src="" alt="BDV"></a>
            </div>
            <div class="column">
                <a href="#" alt="SN"></a>
            </div>
            <div class="column">
                <a href="#"><img src="" alt="CVV"></a>
            </div>
        </div>
        </div>
    <br><br>

    <div class="container container-mine">
        <!-- Footer -->
        <footer class="page-footer font-small indigo">

            <!-- Footer Links -->
            <div class="container text-center text-md-left">

                <!-- Grid row -->
                <div class="row">

                    <!-- Grid column -->
                    <div class="col-md-3 mx-auto">

                        <!-- Links -->
                        <h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine" style="color:black">About</h5>
                        <ul class="list-unstyled text-center">
                            <li>
                                <a href="#" style="color:black">Team</a>
                            </li>
                            <li>
                                <a href="#" style="color:black">Equipo</a>
                            </li>
                            <li>
                                <a @click="faq" style="color:black">FAQ</a>
                            </li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                    <hr class="clearfix w-100 d-md-none">

                    <!-- Grid column -->
                    <div class="col-md-3 mx-auto">

                        <!-- Links -->
                        <h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine" style="color:black">Fondos</h5>
                        <ul class="list-unstyled text-center">
                            <li>
                                <a href="#!" style="color:black">Background</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">1</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">2</a>
                            </li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                    <hr class="clearfix w-100 d-md-none">

                    <!-- Grid column -->
                    <div class="col-md-3 mx-auto">

                        <!-- Links -->
                        <h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine" style="color:black">Services</h5>
                        <ul class="list-unstyled text-center">
                            <li>
                                <a href="#!" style="color:black">E.I.C</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">A.F</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">E.S</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">I.F</a>
                            </li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                    <hr class="clearfix w-100 d-md-none">

                    <!-- Grid column -->
                    <div class="col-md-3 mx-auto">

                        <!-- Links -->
                        <h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine" style="color:black">Reports</h5>

                        <ul class="list-unstyled text-center">

                            <li>
                                <a href="#!" style="color:black">Weekly</a>
                            </li>
                            <li>
                                <a href="#!" style="color:black">Monthly</a>
                            </li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                </div>
                <!-- Grid row -->

            </div>
            <!-- Footer Links -->

            <!-- Copyright -->
            <div class="footer-copyright text-center py-3" style="color:black">0800-123456
                <p>US</p>
            </div>


            <div class="footer-copyright text-center py-3" style="color:black">
                <div class="text-justify">
                    <small>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p></small>
                </div>
            </div>
            <!-- Copyright -->

        </footer>
        <!-- Footer -->
        <a href=# class=scroll-to-top><i class="fa fa-angle-up" aria-hidden=true></i></a>

    </div>
</div>

<script>
export default {
    methods: {
        faq() {
            window.location = "/faq";
        }
    }
}
</script>

<style>
.list-group-footer .list-group-item {
    background-color: transparent;
    border-top-color: transparent;
    border-bottom: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    font-size: 78%;
}

.h4-mine {
    font-size: 80%;
}

.h5-mine {
    font-size: 80%;
    color: black;
}

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 25%;
  padding: -100px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 

.page-footer{
    background-color: #859da9;
}

</style>

1 answer

  • answered 2019-11-08 14:16 Sudhir Roy

    Check your top level element. They have by default padding which is not visible if it matched with the footer. You can only know when you change the background color.