媒体查询不适用于Github Pages上托管的网站

Question

I'm Building a new single page site and for some reason my media query doesn't seem to be working? If I resize the browser it works fine, but if I visit the hosted site on GitHub pages on mobile I still get served the desktop version? Site is hosted here: https://russdog.github.io/mellish/

Interestingly I had the same issue for a project I submitted recently. Fully responsive on browser resizing but never when visited on mobile and hosted on GitHub Pages: https://russdog.github.io/ColmarAcademy/

Is anyone able to help me ascertain why?

HTML is here:

 <!-- Mobile Version -->

    <div class="mobiMain">
      <div class="mobiLogo">
        <img src="resources/images/logo_small.png">
      </div>
      <div class="mobiDetails">
        <!-- <p id="mobiContact">Contact Us</p> -->
        <p>Andrew Mellish (+27) 82 509 0224 | info@mellishvineyards.com</p>
        <p>Wine of Origin Durbanville, Cape Town.</p>
        <p>Welbeloond Farm, Cnr of Potsdam Rd. & Malibongwe Dr. Cape Farms, Cape Town.</p>
      </div>
      <div class="mobiCopyright">© Mellish Family Vineyards</div>
    </div>

CSS is here:

/* MOBILE VERSION */

@media only screen and (max-width: 768px) {
  .desktopMain {
    display: none;
  }

  .mobiMain {
    display: flex;
    flex-flow: column nowrap;
  }

  .mobiLogo {
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    width: 100%;
  }

  .mobiLogo img {
    width: 90%;
    height: 90%;
  }

  .mobiDetails {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2rem;
  }

  .mobiDetails p {
      height: auto;
      text-align: center;
      line-height: 1.3rem;
      font-size: 1.2rem;
    }

    #mobiContact {
      font-size: 3rem;
    }

    .mobiCopyright {
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 1rem;
    }
  }

Answer 1

Try to add this tag in your html head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

More documentation on what this tag does

https://www.w3schools.com/css/css_rwd_viewport.asp