Visualizzazione su mobile

[lastninja]

Visualizzazione su mobile

Salve,
è la prima volta che mi occupo di visualizzazione su mobile e fatico a capirci qualcosa.
Il sito è mymindfree.com. Nella parte responsive del CSS (sotto @media) ho impostato i colori di sfondo per far capire come è strutturato il css. Da un mobile si può vedere come il div "page" è in viola, "main" è in verde mentre "content" è in blu. Io vorrei che "page" arrivasse ad adattarsi ad occupare tutto lo spazio in larghezza dello screen, cosicché il suo contenuto sia visualizzato in modo corretto (adesso ad es il testo sotto lo slider arriva fino a neanche a metà dello spazio in orizzontale, mentre io vorrei che fosse almeno largo quanto lo slider o quanto lo schermo).
Spero di essermi fatto capire. Cmq riporto il CSS per quanto riguarda la parte "@media":

@media (max-width: 800px) {
    /* Simplify the basic layout */
#main {  background-color: #00ff00         /* verde */
    }
#content {  background-color: #0000ff      /* blu */
    }
#page {  background-color: #9447FF         /* viola */
    }
    {
        margin: 0 7.6%;
        width: auto;
    }
    #nav-below {
        border-bottom: 1px solid #ddd;
        margin-bottom: 1.625em;
    }
    #secondary {
        float: none;
        margin: 0 7.6%;
        width: 100%;
    }
    /* Simplify the showcase template */
    .page-template-showcase-php .featured-posts {
        min-height: 280px;
    }
    .featured-posts section.featured-post {
        height: auto;
    }
    .page-template-showcase-php section.recent-posts {
        float: none;
        margin: 0;
        width: 100%;
    }
    .page-template-showcase-php .widget-area {
        float: none;
        margin: 0;
        width: auto;
    }
    .page-template-showcase-php .other-recent-posts {
        border-bottom: 1px solid;
    }
    /* Simplify the showcase template when small feature */
    section.featured-post .attachment-small-feature,
    .one-column section.featured-post .attachment-small-feature {
        border: none;
        display: block;
        float: left;
        height: auto;
        margin: 0.625em auto 1.025em;
        max-width: 100%;
        position: static;
    }
    article.feature-image.small {
        float: right;
        margin: 0 0 1.625em;
        width: 100%;
    }
    .one-column article.feature-image.small .entry-summary {
        height: auto;
    }
    article.feature-image.small .entry-summary p a {
        left: 0;
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }
    /* Remove the margin on singular articles */
    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
        width: 100%;
    }
    /* Simplify the pullquotes and pull styles */
    .singular blockquote.pull {
        margin: 0 0 1.625em;
    }
    .singular .pull.alignleft {
        margin: 0 1.625em 0 0;
    }
    .singular .pull.alignright {
        margin: 0 0 0 1.625em;
    }
    .singular .entry-meta .edit-link a {
        left: 0;
        position: absolute;
        top: 40px;
    }
    .singular #author-info {
        margin: 2.2em -8.8% 0;
        padding: 20px 8.8%;
    }
    /* Make sure we have room for our comment avatars */
    .commentlist {
        width: 100%;
    }
    .commentlist > li.comment,
    .commentlist .pingback {
        margin-left: 102px;
        width: auto;
    }
    /* And a full-width comment form */
    #respond {
        width: auto;
    }
    /* No need to float footer widgets at this size */
    #colophon #supplementary .widget-area {
        float: none;
        margin-right: 0;
        width: auto;
    }
    /* No need to float 404 widgets at this size */
    .error404 .widget {
        float: none;
        margin-right: 0;
        width: auto;
    }
    /* Make sure embeds fit their containers */
    embed,
    object {
        max-width: 100%;
    }
    

}
@media (max-width: 650px) {
    /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
    body, input, textarea {
        font-size: 15px;
    }
    #site-title a {
        font-size: 24px;
    }
    #site-description {
        font-size: 12px;
    }
    #access ul {
        font-size: 16px;
    }
    article.intro .entry-content {
        font-size: 12px;
    }
    .entry-title {
        font-size: 21px;
    }
    .featured-post .entry-title {
        font-size: 14px;
    }
    .singular .entry-title {
        font-size: 28px;
    }
    .entry-meta {
        font-size: 12px;
    }
    blockquote {
        margin: 0;
    }
    blockquote.pull {
        font-size: 17px;
    }
    /* Reposition the site title and description slightly */
    {
        /*padding: 5.30625em 0 0;*/
    }
   ,
    {
        margin-right: 0;
    }
    /* Make sure the logo and search form don't collide */
    #branding #searchform {
        top: 1.625em !important;
    }
    /* Floated content doesn't work well at this size */
    .alignleft,
    .alignright {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    /* Make sure the post-post navigation doesn't collide with anything */
    #nav-single {
        display: block;
        position: static;
    }
    .singular .hentry {
        padding: 1.625em 0 0;
    }
    .singular.page .hentry {
        padding: 1.625em 0 0;
    }
    /* Talking avatars take up too much room at this size */
    .commentlist > li.comment,
    .commentlist > li.pingback {
        margin-left: 0 !important;
    }
    .commentlist .avatar {
        background: transparent;
        display: block;
        padding: 0;
        position: static;
    }
    .commentlist .children .avatar {
        background: none;
        left: 2.2em;
        padding: 0;
        position: absolute;
        top: 2.2em;
    }
    /* Use the available space in the smaller comment form */
    input[type="text"] {
        width: 95%;
    }
    .comment-form-author .required,
    .comment-form-email .required {
        left: 95%;
    }
    .gallery-columns-3 .gallery-item {
        width: 31%;
        padding-right: 2%;
    }
    .gallery-columns-3 .gallery-item img {
        width: 100%;
        height: auto;
    }


}
@media (max-width: 450px) {
    .gallery-columns-2 .gallery-item {
        width: 45%;
        padding-right: 4%;
    }
    .gallery-columns-2 .gallery-item img {
        width: 100%;
        height: auto;
    }

}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
        padding: 0;
        background: none !important;
    }
    {
        margin-top: 0;
    }
    #pcon {
        margin-top: 0;
    } 
    {
        border-top: none;
    }
    #gufo {
        visibility: hidden;
    }