imagemobilebrowserdisplay

Logo image does not show on mobile device browser


I have made a web site, where the logo looks ok when I open it in my laptop browser. However, it doesn't show up in my iPhone or iPad browser. I tried Safari, Chrome, Brave, the same...

This the code in my html file:

<div class="header-logo logo animated" data-animate="fadeInDown" data-delay=".6">
    <a href="./" class="logo-link">
        <img class="logo-dark" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
        <img class="logo-light" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
    </a>
</div>

I have found another Stack Overflow question, the answer says it's because the image size, but I don't think so. My original size is only 1310x242 pixel. and I also tried to reduce the size to only 300x56. It still doesn't show.

Your help is highly appreciated!


Solution

  • okay, I sorted out myself.

    It's the srcset, obviously it defines the set of images we will allow the browser to choose between, and what size each image is. So I forgot to update it to the image that I want in srcset.