Problems with 100% mobile screen width?

Question

2 of my pages on mobile devices do not fill at 100% width, you can see it here .

I have <meta name="viewport" content="width=device-width" /> in my code, and I tried various variations of it. The problem may be in my pages.php file, since the rest of the pages are custom templates?

Here is my code for 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%; } 

I don’t know if I am missing something related to Wordpress, or messed up my code (I am new to coding), or what. It is vague because my other pages work fine and I don’t see anything in the code causing it to be thin.

* btw - until you find out the navigation on your mobile phone, but you can see that it works on other pages by checking the link: Home page .

Answer 1

Everything is correct, but I see scroll , because your footer received several non-responsive codes.

on this page:

http://melmencarelli.com/about/

first add box-sizing: border-box; in #footer-container and set width: 100% as follows:

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

then set width: 100% for .footer-info , for example:

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

---

on this page:

http://melmencarelli.com/

Follow the instructions above, then set width: 100% to:

 @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%; } 

I also see this:

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

I recommend you use this:

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

Ok, everything looks good!