In my laravel project, I have structured my layouts into separate navigation, body, and footer components. To bring them all together, I have a layout file set up like this:
app.blade.php: .......
<style>
.background-img {
background-image: url('images/login_background.png');
background-repeat: no-repeat;
background-size: 100%;
}
.bg-color-navbar {
background-color:#2d2d2d;
}
</style>
</head>
<body class="background-img">
<!-- Navigation bar -->
@include('layouts.navbar')
<div id="app" >
<main class="py-4">
@yield('content')
</main>
</div>
<!-- Footer -->
@include('layouts.footer')
</body>
</html>
Here is my footer.blade.php file:
<footer id="footer-content-collapse-sidebar" style="max-width:100%; overflow: hidden; border-top: 1px solid #fbcc34; padding-top: 0.5rem; background-color: #000;">
...... (footer content)
</footer>
<style>
a:hover{
color: grey;
text-decoration: none;
}
span:hover{
color: grey;
text-decoration: none;
}
.text-font-size{
font-size: 14px;
}
@media(min-width:768px){
.padding-top-md{
padding-top:100px;
}
}
@media(max-width:768px){
.hidden-text{
display: none;
}
.margin-bottom-sm{
margin-bottom: 0;
}
}
</style>
Despite my setup, the footer keeps appearing in the middle of the page instead of at the bottom. How can I ensure it stays at the bottom at all times?