After extensive testing of my website on various devices, I discovered an issue where the logo image would disappear when the page was initially loaded on Mac and iPhone. However, upon refreshing the page, the logo image would appear. It's puzzling that a page reload is necessary to view the logo.
#logo{
width: 20%;
display: inline-block;
padding-right: 1%;
padding-left: 0;
}
@media only screen and (max-width:575px) {
.navbar-brand{
text-align: center;
}
#logo{
width: 50%;
margin: 0 auto;
position: relative;
}
}<h1><a class="navbar-brand" href="index.html"><img id="logo" src="./images/Logo.PNG" alt=""/></a></h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>I am seeking assistance in resolving this perplexing issue. Thank you for any guidance provided!