1

我正在使用 Wordpress。我在http://ninemusepress.com为 212 开发了一个儿童主题

大多数页面在我的 iPhone 上运行良好（二十一十二是响应式的）——但我遇到了依赖于我制作的模板的页面的问题。看起来正在发生的事情是一些容器的大小仍然小于浏览器宽度（即使我尝试将所有包含元素设置为宽度：自动）......而其他元素延伸到 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;
    }

}
4

2 回答 2

1

啊！这是我在底部插入的 Goodreads 小部件——它一定是插入了内联 CSS（而且我无法在我的 CSS 中调整它的大小）......所以它的宽度设置为 690 像素，整个布局都被关闭了。一旦我删除它，布局就会自行纠正。

于 2013-04-24T22:58:05.587 回答
1

在查看了有问题的页面以及您的屏幕截图后 - 很明显，有些东西超出了页面。如果您希望在桌面 Chrome 中看到这些问题，您必须在开发者工具区域更改您的用户代理字符串。但我离题了。

将页面缩小到约 320 像素宽后，我看到了两者.article并且.book-description都很690px宽。它们是（作为开始）两个有问题的页面元素。

将这两个选择器合并到 690px 标记附近的媒体查询中，您应该能够很容易地解决问题。希望这可以帮助！

于 2013-04-24T19:21:02.023 回答