Question

我已经在这里阅读了很长时间的提示，并得到了很多帮助。今天我需要个人帮助......

响应视图（＆lt; 1024 px）应该是全宽的并且以一点填充为中心。填充工作正常，但内容并没有在整个页面上完成，右边有很大的余量。我尝试了这里列出的所有css调整。实际的自定义css代码是：

@media only screen and (max-width: 1024px){
#boxed, html, body, div.container.main-content
{
width:      100% !important;
margin:     0px;
}
.row
{
margin:     0px !important;
width:      100% !important;
padding:    15px !important;
}
.container, .container-wrap
{
margin:     0px !important;
width:      100% !important;
padding:    0px !important;
}
}

该网站是www.timschuermann.com/dev /

提前感谢您的帮助

添

更新1

感谢您的快速解答！我尝试了所有的建议，但它仍然没有用。

实际代码是：

@media only screen and (max-width: 1024px){
div.container.main-content
{
width:      100% !important;
margin:     15px auto !important;
}
#boxed, html, body
{
width:      100%;
margin:     0px;
}
.row
{
width:      100%;
margin:     0px;
padding:    0px;
}
.container, .container-wrap
{
margin:     0px;
width:      100%;
padding:    0px;
}
}

实际设计正是我所得到的＆＃34;开箱即用＆＃34;。

我希望内容显示得更大，左右边距为15px。

但是还有一个新问题：在我的iPhone上，内容上面有空白的房间，颜色为灰色。重装后它就消失了？

我希望你理解我的意思并且可以帮助我。

提前致谢

添

Answer 1

请避免使用!important。当您稍后需要更改样式表时，它会给您带来困难。

要使容器居中，请添加以下内容。

div.container.main-content {
    margin: 0 auto;
    max-width: inherit;
}

Answer 2

太多＆＃34;！important＆＃34;不需要导致css覆盖问题。但要解决当前的问题，你必须使用＆＃34;！important＆＃34;因为先前在同一元素上使用

@media only screen and (max-width: 1024px) {
div.container.main-content {
    width: 100% !important;
    margin: 0px;
    margin: 0 auto !important;/**Added This **/
}
}

但建议您在有空的时候修改代码，删除不必要的代码。希望这有帮助。

Wordpress：在响应式视图中，容器没有占据全宽

2 个答案: