Wordpress twenty-twelve child theme responsive layout problems

Question

I'm working with Wordpress. I've developed a child theme for Twenty Twelve at http://ninemusepress.com

Most of the pages work well on my iPhone (Twenty Twelve is responsive) -- but I run into problems with pages that depend upon templates I made. What looks to be happening is some container is still sized smaller than the browser width (even though I tried to set all containing elements to width: auto)...while other elements stretch across the width of the iPhone browser.

I run into this problem with Safari and the iPhone -- though it seems to be working fine in Chrome (i.e. when I resize the window).

I've been trying to track down what's happening with the code, but I can't for the life of me figuring out which elements are the issue. I'm about to tear my hair out.

You can see an offending page here: http://ninemusepress.com/edgar-wilde-and-the-lost-grimoire/

And here's a screenshot of the page on my iphone: http://ninemusepress.com/images/iphone.png

Here's my child theme's media queries section of the 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;
    }

}

MikeZ MikeZ · Accepted Answer · 2013-04-24T19:21:02

After taking a look at the offending page plus your screenshot - it's clear that something is extending past the page. If you'd like to see these issues represented in desktop Chrome, you have to change your user agent string in the Developer Tools area. But I digress.

After shrinking the page down to ~320px wide, I saw that both .article and .book-description were 690px wide. They are (as a start) the two offending page elements.

Incorporate those two selectors into a media query right around the 690px mark and you should be able to resolve the issue pretty easily. Hope this helps!

Wordpress twenty-twelve child theme responsive layout problems

2 Answers