Я создаю новый одностраничный сайт и по какой-то причине мой медиа-запрос не работает? Если я изменяю размер браузера, он работает нормально, но если я захожу на сайт GitHub, размещенный на мобильном устройстве, я все равно получаю версию для ПК? Сайт размещен здесь: https://russdog.github.io/mellish/
Интересно, что у меня была та же проблема для проекта, который я недавно представил. Полностью реагирует на изменение размера браузера, но никогда при посещении на мобильном устройстве и размещении на GitHub. Страницы: https://russdog.github.io/ColmarAcademy/
Кто-нибудь может помочь мне выяснить, почему?
HTML здесь:
<!-- 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;
}
}