Ome new mobile CSS

@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 736px)
    and (orientation: portrait),
only screen
    and (min-device-width: 320px)
    and (max-device-width: 736px)
    and (orientation: landscape) {

    article img, nav, .entry-content, #branding, #cart-header-menu, #footer, #main {
        /* Each of these items had padding that broke the page layout. */
        box-sizing: border-box;
    }

    h1 {
        /* Given line height was must less than the font size. This caused text to
        wrap vertically upon itself. */
        line-height: 30px;
    }

    #branding nav#access select {
        /* Part of my drive to push content in from the edge. */
        margin-left: 20px;
    }

    hgroup, #main {
        /* Header was pushed left off the screen. This centers it. */
        padding: 0 20px;
    }

    #below_footer p {
        /* The centered text caused a word to wrap weirdly. */
        text-align: left;
    }

    .gallery {
        /* This gallery would load on certain static pages and utterly break the layout. */
        display: none;
    }

    form, .related, .woocommerce, #content, #main {
        /* The floated children were not properly cleared, which broke the width. */
        overflow: auto;
    }

    form:after, .related:after, .woocommerce:after, #content:after, #main {
        clear: both;
        content: '';
        display: table;
    }

    .full-width #content {
        /* The top navigation menu has a fixed position, but inadequate bottom clearance. Site
        items hide behind it. */
        margin-top: 20px;
    }

    .form-row-first, .form-row-last {
        /* The float does not work on cellphone devices; it instead pushes one right and down. */
        float: none;
        margin-bottom: 10px;
        width: 100%;
    }

    .listing-item {
        /* One section did not correctly space these. The result was that paragraph text was pushed to
        one side by images. */
        margin: 10px 0;
    }

    article img {
        /* There are several images with given widths great than that of the content or window on mobile
        devices. This simply constrains them. */
        display: block;
        height: auto;
        max-width: 100%;
    }

    .slideshow_container {
        /* The landing page slideshow hid other content, broke the width and height of the container, and
        in some cases didn't even load content. */
        display: none;
    }
}