响应式全宽部分

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%;
    }
}