Hey there, I'm encountering a puzzling issue: I have a header with a gradient background that displays perfectly on desktop. However, when I preview it on Chrome mobile emulator, it looks fine. But when I test it on an actual tablet or mobile device, the header background appears transparent. I'm baffled by this.https://i.sstatic.net/NTcmA.png
<!--NAVIGATION MENU -->
<div>
<nav class="green navbar navbar-expand-lg navbar-light bg-mine w-100 fixed-top" id="banner" >
<div class="container"> <a href="#" class="navbar-brand ml-4"><img src="images/logo.png" class="logo"></a>
<button class="navbar-toggler custom-toggler mr-4" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style=""></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active" ><a class="nav-link menuitem" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link menuitem" href="index.html#products">Products</a></li>
<li class="nav-item"><a class="nav-link menuitem" href="table.html">Growth Chart</a></li>
<li class="nav-item"><a class="nav-link menuitem" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71181f171e3119141c0105031015181f165f121e1c">[email protected]</a>">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
.green{
width: 100% !important;
background-image: linear-gradient(to right, rgba(12,76,68), rgba(0,128,75)) !important;
}
.navbar{
font-weight: 400;
font-size: 18px;
padding-top: 10px;
padding-bottom: 10px;
height: 100px;
padding-left: 0px;
padding-right: 0px;
}