Wordpress二十二個兒童主題響應式佈局問題

Question

我正在使用Wordpress。我已經開發了二十二子主題在http://ninemusepress.com

大部分的網頁在我的iPhone上運行良好（二十二響應） - 但我碰上與依賴於我的模板頁面的問題。看起來發生的是一些容器的尺寸仍然小於瀏覽器寬度（儘管我試圖將所有包含的元素設置爲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

Ach！這是我在底部插入的Goodreads小部件 - 它一直沒有插入CSS內聯（我無法調整它在我的CSS中）...所以它的寬度設置爲690px，拋出整個佈局。一旦我將其刪除，佈局自行修正。

Answer 2

在看了有問題的頁面和你的屏幕截圖之後 - 很明顯，有東西正在擴展到頁面之外。如果您希望在桌面版Chrome瀏覽器中看到這些問題，則必須在「開發人員工具」區域中更改您的用戶代理字符串。但我離題了。

將頁面縮小至〜320px寬後，我看到.article和都是690px寬。它們（作爲開始）是兩個違規的頁面元素。

將這兩個選擇器合併到690像素左右的媒體查詢中，您應該可以很容易地解決問題。希望這可以幫助！