css - 响应式全宽部分

Question

有人可以查看我的网站并帮助我修复在移动设备上查看某个部分时的外观。主页上的“成千上万的加拿大人”和“移动搜索”部分不像页面的其余部分那样具有响应性。任何帮助将不胜感激。以下是我到目前为止插入的 CSS:

@media all and (max-width: 640px){
#site > .wrapper, #footer > .wrapper {
    margin: 0;
    padding: 40px;
    width: auto;
}
}

www.jobspark.ca

Answer 1

我不认为您的目标是正确的部分，如果您查看它们所在的列，就会发现 .myLeftColumn 和 .myRightColumn div 具有原始百分比宽度。当屏幕小于 640 像素或您需要断点时，请尝试将两者都更改为 100% 宽度。

@media all and (max-width: 640px) {
    .sqs-block-content .myLeftColumn,
    .sqs-block-content .myRightColumn {
        width: 100%;
    }
}