Recently, I've delved into the world of web development with bootstrap and have come across an issue with my footer...
Currently, my desktop version footer looks like this:
https://i.sstatic.net/qMuSJ.jpg
All the footer elements are displayed in line perfectly.
However, when I switch to the mobile design, the footer elements stack on top of each other rather than remaining in line:
https://i.sstatic.net/z5EW4.jpg
I attempted to rectify this by using media queries and CSS, adding a display: inline-block to the HTML list, but unfortunately, it didn't work. I'm unsure of what I should do to keep it displaying correctly.
Here is the CodePen link for the footer: https://codepen.io/rgmislife/pen/poJJeyV
.footer-page {
background-color: #d2d7e8;
right: 0;
bottom: 0;
left: 0;
position:relative;**
width: 100%;
height: auto;
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
.footer-page {
position: relative;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.footer-page {
position: absolute;
}
}
.navbar-brand {
font-family: 'Raleway', regular;
color: white;
font-size: 15px;
letter-spacing: 1px;
}
.icon {
font-size: 0.4rem;
}
.nav-link {
font-family: 'Raleway', Semi-Bold;
letter-spacing: 1px;
color: #3a5199;
font-size: 15px;
letter-spacing: 1px;
}<link href="//use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<div class="footer-page">
<nav class="navbar navbar-fixed-bottom navbar-expand-md bg-faded justify-content-center">
<a href="index.html" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
</li>
<li class="nav-item d-inline-block">
<a class="nav-link" href="nous-contacter.php"><i class="fas fa-envelope fa-2x"></i></a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
…
</ul>
</div>
</nav>
</div>
</footer>This is the CSS code I tried:
.nav li {display: inline-block;}
If anybody has any suggestions or solutions, please feel free to share. Thanks!