Question

我正在使用Wordpress。我在http://ninemusepress.com

为Twenty Twelve开发了一个儿童主题

大部分页面在我的iPhone上运行良好（Twenty Twelve响应） - 但是我遇到了依赖于我制作的模板的页面问题。看起来正在发生的事情是某个容器的大小仍然小于浏览器宽度（即使我尝试将所有包含元素设置为width：auto）...而其他元素则跨越iPhone浏览器的宽度。

我在Safari和iPhone上遇到了这个问题 - 虽然它似乎在Chrome中运行良好（即当我调整窗口大小时）。

我一直在努力追查代码中发生的事情，但我不能为我的生活找出哪些元素是问题。我要把头发撕掉了。

您可以在此处看到违规页面：http://ninemusepress.com/edgar-wilde-and-the-lost-grimoire/

这是我的iphone页面的屏幕截图：http://ninemusepress.com/images/iphone.png

这是我的孩子主题的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;
    }

}

Answer 1

在查看了违规页面和屏幕截图后，很明显有些内容正在延伸到页面之外。如果您希望在桌面Chrome中看到这些问题，则必须在“开发者工具”区域中更改用户代理字符串。但我离题了。

将页面缩小到~320px宽后，我发现.article和.book-description都是690px宽。它们（作为一个开始）是两个有问题的页面元素。

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

Answer 2

胆碱！这是我在底部插入的Goodreads小部件 - 它必须插入CSS内联（我无法在CSS中调整大小）...所以它的宽度设置为690px，抛弃了整个布局。删除后，布局自行调整。

Wordpress二十二个孩子主题响应布局问题

2 个答案: