По какой-то причине мой медиа-запрос изменил мой оригинальный дизайн для мобильных устройств

Question

Я работаю над этим адаптивным сайтом (размещенный сайт) . Если вы используете инструмент проверки, он отлично смотрится на версиях для настольных ПК и планшетов, но в мобильной версии разделы все еще находятся рядом друг с другом. Я сделал это мобильным, чтобы медиа-запрос не должен был повлиять на мобильную версию. Чтобы быть еще более понятным, мобильная версия должна выглядеть так: this

Я разместил код на github , но я считаю, что соответствующий код:

@media (min-width: 600px) {
    .authentic {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        grid-template-areas: 'bowl content';
        height: 100%;
        margin: 0px;
    }

    .right-col {
        grid-area: content;
        padding: 0 10%;
        text-align: left;
        align-self: center;
    }
img {
    grid-area: bowl;
    object-fit: cover;
    height: 50vh;

  }
}

Я новичок в переполнении стека, поэтому, если я что-то упустил, дайте мне знать. Ty!

Answer 1

Вы должны указать браузеру установить ширину страницы, чтобы она соответствовала ширине экрана устройства с чем-то вроде этого в заголовке вашего индекса. html:

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

Answer 2

Кажется, вам не хватает мета-тега viewport внутри элемента вашего html

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