Footer is not responsive in my website. (using bootstrap)

Question

I been working on a website in Visual Studio ASP.NET. I have a problem with my footer i have implemented, because it is not responsive. To make things clear, i can show 2 images of the problem.

Fullscreen:

Iphone size:

I'm not sure what is causing the problem, because if i make a normal and a col-md-4 x3 then it's working fine, but inside the it dosen't work.

My code:

    <!-- Foooter
================== -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <!-- Contact us form -->
                <div class="col-md-4">
                    <div class="headline">
                        <h3>CONTACT US</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            San Francisco, CA 94101<br />
                            1987 Lincoln Street<br />
                            Phone: +0 000 000 00 00<br />
                            Fax: +0 000 000 00 00<br />
                            Email: admin@mysite.com
                        </p>
                    </div>
                </div>
                <!-- Go social -->
                <div class="col-md-4">
                    <div class="headline">
                        <h3>GO SOCIAL</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            Get in toach with us:
                        </p>
                    </div>
                </div>
                <!-- Subscibe -->
                <div class="col-md-4">
                    <div class="headline">
                        <h3>SUBSCRIBE</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            Subscribe here:
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

CSS:

From bootstrap.css

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
}

footer {
    background-color: #3f8797;
    position: absolute;
    bottom: 0;   
    color: white;
    width: 100%;
    height: 230px;
    font-family: 'Lato', sans-serif;    
}

From Site.css file

body {
    padding-top: 50px;
    padding-bottom: 235px;

}

.body-content {
    padding-left: 30px;
    padding-right: 30px;
}

In fullscreen the header is what it should be --> down at the bottom at all time (not fixed position), but now its not responsive..

Hope someone can see what is wrong.

Answer 1

To get the desired outcome you will need to a media queries to position the footer at the bottom of the screen on on medium screens and the fall back to just positioning it at the bottom of the content on smaller devices. As shown in this Pen ,

I have made changes to the default styles of the footer:

footer {
    background-color: #3f8797; 
    color: white;
    width: 100%;
    font-family: 'Lato', sans-serif;    
}
body {
    padding-top: 50px;
}

And then on devices > 992px bootstraps medium breakpoint we reposition the footer at the bottom.

@media (min-width: 992px) {
    body {
        padding-bottom: 235px;
    }
    footer {
        position: absolute;
        bottom: 0;   
        width: 100%;
        height: 230px;   
    }
}

---

Or you can adjust the padding sizes depending on the content in the footer Pen , this is manual though the same effect could be made more dynamic using javascript.

footer {
    background-color: #3f8797; 
    color: white;
    width: 100%;
    font-family: 'Lato', sans-serif;    
}
body {
    padding-top: 50px;
}

@media (min-width: 992px) {
    body {
        padding-bottom: 235px;
    }
    footer {
        position: absolute;
        bottom: 0;   
        width: 100%;
        height: 230px;   
    }
}

Answer 2

Change:

footer {
    background-color: #3f8797;
    position: absolute;
    bottom: 0;   
    color: white;
    width: 100%;
    height: 230px;
    font-family: 'Lato', sans-serif;    
}

to:

footer {
    background-color: #3f8797;
    position: absolute;
    bottom: 0;   
    color: white;
    width: 100%;
    min-height: 230px;
    font-family: 'Lato', sans-serif;    
}

And your on your way.