Problemi con larghezza del viewport del 100% in dispositivi mobili?

Question

2 delle mie pagine in dispositivo mobile non stanno raggiungendo la larghezza massima del 100%, è possibile vederlo here.

Ho il <meta name="viewport" content="width=device-width" /> nel mio codice e ho provato varie varianti di esso. Il problema potrebbe essere nel mio file pages.php, poiché il resto delle pagine sono modelli personalizzati?

Ecco il mio codice per page.php:

<?php 
/** 
* The template for displaying all pages. 
* 
* This is the template that displays all pages by default. 
* Please note that this is the WordPress construct of pages 
* and that other 'pages' on your WordPress site will use a 
* different template. 
* 
*/ 

get_header(); ?> 

<div id="primary" class="content-area"> 
    <div id="content" class="site-content" role="main"> 
     <?php while (have_posts()) : the_post(); ?> 

     <?php get_template_part('content'); ?> 

     <?php endwhile; // end of the loop. ?> 
    </div><!-- #content .site-content --> 
</div> 

<?php get_footer(); ?> 

CSS:

#content { 
    margin: 0 auto; 
    max-width: 51em; 
    background: none; 
    float: none; 
    margin: 0 auto; 
    padding: 0; 
} 

#primary { 
    width: 100%; 
} 

Non so se mi manca qualcosa che è legato wordpress, o incasinato il mio codice (I Sono un principiante al codice), o cosa. Confuso perché le mie altre pagine stanno funzionando bene e non riesco a vedere nulla nel codice che sta causando quella larghezza sottile.

* btw - non ho ancora trovato il nav in mobile, ma puoi vedere che funziona nelle altre pagine controllando il link: Home.

Answer 1

tutto è corretto ma non vedo perché il vostro scrollfooter got alcuni non-responsive codici.

in questa pagina:

http://melmencarelli.com/about/

prima, aggiungere box-sizing: border-box;-#footer-container e impostare width: 100% come questo:

#footer-container { 
    width: 100%; 
    margin: 0 auto; 
    padding: 30px; 
    box-sizing: border-box; 
} 

quindi, impostare width: 100% per 012.342., in questo modo:

.footer-info { 
    float: left; 
    width: 100%; 
    margin-bottom: 25px; 
} 

---

in questa pagina:

http://melmencarelli.com/

fare sopra di istruzioni quindi impostare width: 100% per:

@media only screen and (max-width: 1023px) and (min-width: 0px) 
@media only screen and (max-width: 1023px) and (min-width: 0px) 
@media only screen and (max-width: 500px) and (min-width: 0px) 
html input[type="button"] { 
    font-size: 14px; 
    padding: 20px 20px; 
    width: 100%; 
} 

anche vedo questo:

<div class="home-button"> 
<a href="http://melmencarelli.com/mentoring/"> 
<input type="button" value="HOW WE WORK TOGETHER"> 
</a> 
</div> 

vi consiglio di usare questo:

<div class="home-button"> 
<a href="http://melmencarelli.com/mentoring/"> 
<button>HOW WE WORK TOGETHER</button> 
</a> 
</div> 

bene, tutto sembra buono!