Blazor server side android/iOS view issue-CodePudding

I have Blazor Server-side application and I am now testing it on android and ios phones.

I have noticed that the header of the website is not displayed as it does on my desktop.

Here is how my Header looks on my Desktop:

and here is how it looks on my android and ios devices:

Here is my MainLayout.razor code:

@inherits LayoutComponentBase


<div >

    <nav >
        
        
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSU"
                 width="120"
                 height="95" />
        

            <div >

                <a  asp-area="" href=".">EEXI</a>
                <button  type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div >
                    <ul >
                        <li >
                            <a  asp-area="" href="/About">About</a>
                        </li>
                    </ul>
                </div>
                <div >
                    <a href="/Admin"><img src="https://i.imgur.com/yBzRXgu.png" title="Admin" /></a>
                </div>
            </div>

    </nav>

    <div >
        @Body
    </div>
    <footer >
        <div >
            <hr />
            <p>© 2022 - Dromon Bureau of Shipping - <a href="https://www.dromon.com/privacy-policy-2/" target="_blank">Privacy Policy</a></p>
        </div>
    </footer>
</div>

Here is my Host.cshtml

  <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0">

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EEXI Calculator</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" >Reload</a>
        <a >