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; } }