Iphone Wordpress 12个子主题响应布局问题

我在和Wordpress合作。我已经为12岁的孩子们设计了一个主题

大多数页面在我的iPhone上运行良好（212响应良好） --但是我遇到了依赖于我制作的模板的页面的问题。看起来，一些容器的大小仍然小于浏览器的宽度（尽管我试图将所有包含的元素设置为“宽度：自动”），而其他元素则延伸到iPhone浏览器的宽度

我在Safari和iPhone上遇到了这个问题——尽管它在Chrome上似乎工作得很好（例如，当我调整窗口大小时）

我一直在努力追踪代码发生了什么，但我一辈子都搞不清楚哪些元素是问题所在。我要把头发扯下来了

您可以在此处看到有问题的页面：

这是我的iphone上的页面截图：

以下是CSS中“我的孩子”主题的“媒体查询”部分：

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

#primary {
    width: auto;
} 

#book-description {
    width: auto;
}

.page-template-page-templatesbook-php .site-content {
    width: auto;
}

#secondary {
    width: auto;
}

.page-template-page-templatesbook-php .site-content {
    width: auto;
}

#book-cover {
    float: left;
    width: 200px;
}

#book-cover img {
    max-width: 190px;
}

.page-template-page-templatesbook-php article {
    float: left;
    width: auto;
    margin:0;
}

.page-template-page-templatesbook-php .entry-header {
    margin: 0;
}

#book-description {
    float: left;
    width: auto;
    margin: 0;
}

#book-purchase {
    float: left;
    width: auto;
    position: relative;
    top: 0;
}


#book-cover {
    width: auto;
    margin-bottom: 15px;
}

#book-cover img {
    width: 90%;
}

#book-description {
    width: auto;
    margin: 0;
}


.home #primary {
    margin-top: 0;
}

.sample-page {
    width: auto;
    padding: 0;
}

.sample {
    position: relative;
    top:  0;
    width: auto;
}

.book-info {
    width: auto;
    margin-bottom: 50px;
    -webkit-box-shadow: 0 0 0 0 #ccc;
    -moz-box-shadow: 0 0 0 0 #ccc;
    box-shadow: 0 0 0 0 #ccc;
}

  #goodreads-widget {
    width:  690px;
  }

  .bbPress .site-content {
    width: auto;
  }

  .bbPress .widget-area {
    width: auto;
  }

  .page-template-page-templatesbook-php article {
    width: auto;
  }

  .site {
    width: auto;
  }

}

/* Landscape phones and down */
@media (max-width: 480px) { 

    #primary {
        width: auto;
    } 

    .site {
        width: auto;
    }
    #secondary {
        width: auto;
    }

    .page-template-page-templatesbook-php .site-content {
        width: auto;
    }

    .page-template-page-templatesbook-php article {
        width: auto;
    }

    #goodreads-widget {
        display: auto;
    }

    #book-description {
        width: auto;
    }

    #main, .wrapper {
        width: auto;
    }

}

---

在查看了有问题的页面和您的屏幕截图之后，很明显有什么东西正在扩展到页面之外。如果您想在桌面Chrome中看到这些问题，您必须在开发者工具区域更改您的用户代理字符串。但我离题了

将页面缩小到约320px宽后，我看到

.article

和

.book description

都是

690px

宽。首先，它们是两个有问题的页面元素

---

将这两个选择器合并到690px标记附近的媒体查询中，您应该能够非常轻松地解决该问题。希望这有帮助

啊！这是我在底部插入的Goodreads小部件——它一定是插入了CSS内联（并且我无法在CSS中调整它的大小）……因此它的宽度设置为690px，从而使整个布局失去了意义。一旦我删除了它，布局就恢复正常了

谢谢！嗯，在媒体查询中，我将

#book description

设置为

width:auto

，认为它将与包含的元素一样宽。我还尝试了宽度：100%。这两个都不起作用。我将其设置为

宽度：290px

作为临时修复，但这当然不理想。我太沮丧了，弄不清发生了什么事。