Guys I am new to web development and currently am creating website but I got stuck in footer problem. I am using bootstrap for styling and I thought bootstrap was pretty good for styling but I got a problem. My content is appearing over footer when I "ZOOM IN" OR "RESIZING TO IPAD PRO" my content is appearing on my footer and that's scary. I searched on whole internet but couldn't find any solution. So can you guys please help me out.
body {
font-family: 'Poppins', sans-serif;
}
body>.container {
padding-top: 60px;
}
.content {
margin-bottom: 10%;
}
a {
color: black;
}
a:hover {
text-decoration: none;
color: black;
}
.navbar {
background-color: coral;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-link {
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 16px;
transition: 0.1s;
}
.nav-link:hover {
color: rgb(220, 217, 217);
}
ul {
list-style-type: none;
}
ul li {
padding-left: 30px;
}
.container.full-height {
height: calc(100vh - 413px);
}
.site-footer {
background-color: #26272b;
padding: 61px 0 20px;
font-size: 15px;
line-height: 24px;
color: #737373;
height: 10%;
}
.site-footer hr {
border-top-color: #bbb;
opacity: 0.5
}
.site-footer hr.small {
margin: 20px 0
}
.site-footer h6 {
color: #fff;
font-size: 16px;
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 2px
}
.site-footer a {
color: #737373;
}
.site-footer a:hover {
color: #3366cc;
text-decoration: none;
}
.footer-links {
padding-left: 0;
list-style: none
}
.footer-links li {
display: block
}
.footer-links a {
color: #737373
}
.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
color: #3366cc;
text-decoration: none;
}
.footer-links.inline li {
display: inline-block
}
.copyright-text {
margin: 0
}
@media (max-width:991px) {
.site-footer [class^=col-] {
margin-bottom: 30px
}
}
@media (max-width:767px) {
.site-footer {
padding-bottom: 0
}
.site-footer .copyright-text,
.site-footer {
text-align: center
}
}
@media(max-width: 767px) {
.container.full-height {
height: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Adnan Ullah Khan</title>
</head>
<body>
<nav class="navbar navbar-expand-lg justify-content-end">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto container justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PROJECTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<div class="container full-height content">
{% block content %}{% endblock %}
</div>
<footer class="site-footer mb-5">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>About</h6>
<p class="text-justify">some line</p>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">© Copyright 2021
<a href="#"></a>.
</p>
</div>
</div>
</div>
</footer>
</body>
</html>