I encountered an issue with the bottom navbar menu on the mobile version of my website. It appears as an app-like bottom menu and looks great on most devices except for those with a 320px width size. In these cases, the navbar does not stretch to fill the entire screen width but rather gets cut off prematurely (I am utilizing Bootstrap 4).
Here is the expected appearance:
https://i.sstatic.net/HV1ru.png
However, this is what occurs on devices with a 320px width:
https://i.sstatic.net/cS74v.png
When I tried adding width: 100vw, this was the result:
https://i.sstatic.net/ARsfB.png
Below is the snippet of HTML code being used:
// Tablets and Phones (768 and down) //
@media (max-width: 768px) {
.nh-mobile-footer-bottom {
display: flex;
background-color: $white;
height: 78px;
align-items: flex-start;
padding-top: 10px;
box-shadow: 0px -4px 27px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px -4px 27px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px -4px 27px rgba(0, 0, 0, 0.1);
}
// More CSS styling...
}