Question posted in 
I am trying to build a website (using bootstrap 4) that has a footer containing 3 columns. When the browser is big enough (e.g. open on PC) it looks absolutely fine, but if the browser is compressed (e.g. mobile phone) then you only see part of the footer.
What am I doing wrong please? I have been googling for hours, reading as many other Stack Overflow articles and trying them and not getting anywhere.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 200px; /* bottom has to be the same as footer height */
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.copyright-container
{
padding: 10x;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="2.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container"><p>Page Content</p></div>
<footer class="section footer-classic context-dark bg-image" style="background: #000000;">
<div class="container">
<div class="row row-30">
<div class="col-md-4 col-xl-5">
<div class="pr-xl-4">
<hr>
<div class="text-center center-block">
<p>You can follow us on:</p>
<a href="https://www.facebook.com/bootsnipp"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
<a href="https://twitter.com/bootsnipp"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
<a href="mailto:[email protected]"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
</div>
<hr>
</div>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Site</h5>
<ul class="nav-list">
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Accessibility</a></li>
</ul>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Legal</h5>
<ul class="nav-list">
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="row copyright-container">
<p class="rights">
<span>© </span><span class="copyright-year">2020</span><span> </span><span>PERSON</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</footer>
</body>
</html>
2
Answers
I have edit your css & HTML
https://jsfiddle.net/lalji1051/r5aqxetv/7/
I think the main issue might be incorrect structure (HTML along with the corresponding Bootstrap classes). If you’re going to use Bootstrap’s grid system, then it’s a good idea to follow the structure that they recommend in order to have a fully responsive website.
Following their convention and structure can be tricky at first, but once you go through the motions it should work fine. Be aware that specific styling and layout does require some research.
The following example was inspired from their project examples page.I adapted the code based on your question regarding the footer responsiveness. I removed the top navbar for simplicity:
Working example here