On my mobile device with a screen width of 320px, I'm having trouble with the Account icon not displaying correctly. The issue seems to be specific to this icon within my fixed bottom navigation bar. My layout is built using Bootstrap and I'm using Font Awesome for the icons.
When I view the website on a 320px screen width device, only half of the Account icon appears. It's strange because the other icons are showing up fine without any issues. I've tried switching to different Font Awesome icon classes for the Account icon, but the problem persists.
Can anyone suggest a solution to fix this problem?
.fixed-bottom-section {
position: fixed;
bottom: 0;
width: 100%;
background-color: white;
z-index: 1000;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
}
.fixed-bottom-section .my_icons {
margin-left: -35px;
}
.fixed-bottom-section .my_icons a:hover {
color: #007bff;
}
.my_icons a {
color: black;
font-size: 14px;
text-decoration: none;
}
.my_icons a:hover {
color: #007bff;
text-decoration: none;
}
.my_icons i {
font-size: 20px;
display: block;
margin-bottom: 5px;
}
.my_icons p {
margin: 0;
font-size: 12px;
} <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c1dac4dac6">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<section class="fixed-bottom-section">
<div class="card">
<div class="card-body">
<div class="container">
<div class="row justify-content-center">
<div class="col text-center">
<div class="my_icons d-flex justify-content-between">
<a href="#" class="nav-link text-center">
<i class="fa-solid fa-house-chimney"></i>
<p>Home</p>
</a>
<a href="{% url 'Transaction' %}" class="nav-link text-center">
<i class="fa-solid fa-rotate-right"></i>
<p>Transaction</p>
</a>
<a href="{% url 'Wallet_Summary' %}" class="nav-link text-center">
<i class="fa-solid fa-money-bill"></i>
<p>History</p>
</a>
<a href="#" class="nav-link text-center">
<i class="fa-solid fa-plus"></i>
<p>Fund</p>
</a>
<a href="{% url 'Account' %}" class="nav-link text-center">
<i class="fa-solid fa-user"></i>
<p>Account</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>