Hello everyone, I am currently in the process of creating a basic template to enhance the overall design of my website. I recently started utilizing Bootstrap and encountered an issue where my footer is overlapping when I resize my browser to a smaller size, such as on a mobile device.
Does anyone have an idea why this is occurring?
Would you mind taking a look at these images that illustrate the problem: https://i.sstatic.net/MFzdp.png https://i.sstatic.net/IQ5R1.png
As a beginner in Bootstrap, I acknowledge that I may be making a simple mistake that can easily be rectified. Your assistance is greatly appreciated :)
Below is the CSS code I am using:
html, body { height:100% }
nav {
margin: 0;
padding: 0;
}
div {
display: block;
}
.col-centered {
float: none;
margin: 0 auto;
}
.center {
margin-left:auto;
margin-right:auto;
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
.container {
width: 100%;
margin: 0;
padding: 0;
height:100%;
background:red;
}
.content {
padding: 5rem 1.5rem;
text-align: left;
height:90%;
width:75%;
margin:0 auto;
background: green;
}
footer {
background: grey;
height:10%;
width:75%;
margin:0 auto;
}
Here is the main HTML structure:
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Content goes here...</p>
</div>
</div>
</div>
<?php include "footer.php" ?>
EDIT: Apologies for forgetting to include the footer code. If it's necessary for troubleshooting, please feel free to request it.
Thank you for taking the time to review this post!
EDIT 2: Here is the code snippet for the footer:
<footer>
<div class="row">
<div class="col-md-auto">
<p class="float-right"><a href="#">Back to top</a></p>
<p>© 2017 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</div>
</div>
</footer>
Visit the website at: