Wordpress двадцать двенадцать детской темы отзывчивые макеты проблемы

Question

Я работаю с Wordpress. Я разработал детскую тему для Twenty Twelve в http://ninemusepress.com

Большинство страниц работает хорошо на моем 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; 
    } 

} 

Answer 1

Ach! Это был виджет Goodreads, который я вставил внизу - он должен был вставлять встроенный CSS (и я не мог изменять его размер в моем CSS) ... так что ширина была установлена ​​на уровне 690 пикселей, отбросив весь макет. Как только я удалил его, макет сам по себе.

Answer 2

После того, как вы посмотрите на страницу с нарушением и ваш скриншот - это ясно, что что-то распространяется на страницу. Если вы хотите увидеть эти проблемы, представленные в настольном Chrome, вы должны изменить строку своего пользовательского агента в области «Инструменты разработчика». Но я отвлекся.

После сокращения страницы до ~ 320 пикселей шириной, я увидел, что и .article, и были 690px wide. Они (как начало) два оскорбительных элемента страницы.

Включите эти два селектора в медиа-запрос прямо около отметки 690px, и вы должны легко решить проблему. Надеюсь это поможет!