HTML / CSS Мобильный макет не отвечает

Question

Я работаю над компонентом единой ценовой сетки Frontend Mentor и не могу адаптировать дизайн моего мобильного устройства. Верхняя часть страницы исчезает с верхней части страницы, когда я уменьшаю размер своего браузера.

Вот ссылка: https://single-price-grid-component.jordanchude.now.sh/

Вот мой репозиторий: https://github.com/jordanchude/single-price-grid-component/blob/master/index-style.css

Вот фрагмент кода из моего медиазапроса.

@media (max-width: 1000px) {
.container {
    display: flex;
    flex-direction: column;
}
#bottom-row {
    flex-direction: column;
    box-sizing: content-box;
    width: 200%;
}
#top-box {
    display: flex;
    flex-direction: column;
}

#bottom-right-box {
    border-radius: 0px 0px 15px 15px;
}

#bottom-left-box {
    border-radius: 0px;
}

#top-box, #bottom-right-box, #bottom-left-box {
    box-sizing: border-box;
    padding: 20px;
}

Вот фотография того, о чем я говорю. Я могу прокрутить вниз, но не вверх.

Answer 1

Проблема в вашем переводе, который перемещает ваши элементы вверх независимо от пределов страницы.

transform: translate(-50%, -50%);

Вы можете настроить преобразование на нет в вашем медиа-запросе для небольшого разрешения или найти другой способ центрировать ваш div при использовании размера рабочего стола.

Попробуйте это

@media (max-width: 1000px) {
.container {
    display: flex;
    flex-direction: column;
    transform: translate(50%, 0%);  
    top: 0;  
    left: 0; 
}