HTML/CSS 移動布局沒有響應

Question

我正在研究 Frontend Mentor 的 Single Price Grid 組件，但無法讓我的移動設計具有響應性。 當我縮小瀏覽器時，它的頂部會離開頁面頂部。

這是一個鏈接： 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; 
}