CSS Grid не реагирует на мобильные браузеры

Question

Я создал адаптивный веб-сайт и прекрасно работает, когда я изменяю размер браузера, но веб-сайт не работает только на смартфонах, только когда я добавляю @ media , он не работает на мобильных браузерах

Мой CSS:

.Footer {
background: #222;
color: #fff;
padding: 2px;
align-items: center;
text-align: center;


@media(min-width: 600px) {
.Footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

Answer 1

Похоже, вы запутали min-width и max-width для запроса @media. Итак, попробуйте использовать это так:

@media(max-width: 600px) {
.Footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

Answer 2

Используйте ниже медиа-запрос. Поскольку min-width: 600px не обнаружит ваше мобильное устройство

@media(max-width: 600px) { 
    //your code 
}

или

@media only screen and (max-width: 600px){ 
     //your code 
}

Или, может быть, вы пропустили добавление окна просмотра, которое вы можете использовать ниже одного

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