title: Page Speed Insights - Size Content to Viewport?
body: <p>I am getting the error in Google Page Speed Insights stating:</p>
  
  <p>"The page content is too wide for the viewport, forcing the user to scroll horizontally.  Size the page content to the viewport to provide a better user experience."</p>
  
  <p>"The page content is 378 CSS pixels wide, but the viewport is only 320 CSS pixels wide."</p>
  
  <p>I have the viewport set in the header as follows:
      <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/&gt;</code>
  I still have the issue when set it to only:
      <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1 /&gt;</code></p>
  
  <p>One of the elements that it says along with many others is outside of the viewport is:
      <code>&lt;a href="post-template.php...&gt;US Carriers are...&lt;/a&gt;</code></p>
  
  <p>The site url mofiki.com/dev/aa/ is and my CSS is:</p>
  
  <pre><code>`               .rmm {
                  display:block;
                  position:relative;
                  width:100%;
                  padding:0px;
                  margin:0 auto !important;
                  text-align: center;
                  line-height:19px !important;
              }
              .rmm * {
                  -webkit-tap-highlight-color:transparent !important;
                  font-family:Arial;
              }
              .rmm a {
                  color:#ebebeb;
                  text-decoration:none;
              }
              .rmm .rmm-main-list, .rmm .rmm-main-list li {
                  margin:0px;
                  padding:0px;
              }
              .rmm ul {
                  display:block;
                  width:auto !important;
                  margin:0 auto !important;
                  overflow:hidden;
                  list-style:none;
              }
  
              /* sublevel menu - in construction */
              .rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
                  display:none !important;
                  height:0px !important;
                  width:0px !important;
              }
              /* */
  
              .rmm .rmm-main-list li {
                  display:inline;
                  padding:padding:0px;
                  margin:0px !important;
              }
              .rmm-toggled {
                  display:none;
                  width:100%;
                  position:relative;
                  overflow:hidden;
                  margin:0 auto !important;
              }
              .rmm-button:hover {
                  cursor:pointer;
              }
              .rmm .rmm-toggled ul {
                  display:none;
                  margin:0px !important;
                  padding:0px !important;
              }
              .rmm .rmm-toggled ul li {
                  display:block;
                  margin:0 auto !important;
              }
  
              /* MINIMAL STYLE */
  
              .rmm.minimal a {
                  color:#333333;
              }
              .rmm.minimal a:hover {
                  opacity:0.7;
              }
              .rmm.minimal .rmm-main-list li a {
                  display:inline-block;
                  padding:10px 20px 10px 20px;
                  margin:0px -3px 0px -3px;
                  font-size:18px;
              }
              .rmm.minimal .rmm-toggled {
                  width:95%;
                  min-height:50px;
              }
              .rmm.minimal .rmm-toggled-controls {
                  display:block;
                  height:50px;
                  color:#333333;
                  text-align:left;
                  position:relative;
              }
              .rmm.minimal .rmm-toggled-title {
                  position:relative;
                  top:9px;
                  left:9px;
                  font-size:18px;
                  color:#33333;
              }
              .rmm.minimal .rmm-button {
                  display:block;
                  position:absolute;
                  right:9px;
                  top:7px;
              }
  
              .rmm.minimal .rmm-button span {
                  display:block;
                  margin:5px 0px 5px 0px;
                  height:3px;
                  background:#333333;
                  width:30px;
              }
              .rmm.minimal .rmm-toggled ul li a {
                  display:block;
                  width:100%;
                  font-size:20px;
                  text-align:center;
                  padding:15px 0px 15px 0px;
                  border-bottom:1px solid #dedede;
                  color:#333333;
              }
              .rmm.minimal .rmm-toggled ul li:first-child a {
                  border-top:1px solid #dedede;
              }
  
              /* SITE STYLES */
              h2, h3 {
                  margin: 5px 0;
              }
              a {
                  text-decoration:none;
                  color:#333333;
              }
              img.alignright {
                  float:right;
                  padding:5px 0 10px 15px;
              }
              .fixed-menu {
                  position: fixed;
                  top: 0;
                  left: 0;
                  right: 0;
                  background-color: #fff;
                  -webkit-box-shadow: 0 4px 4px -2px #ccc;
                  -moz-box-shadow: 0 4px 4px -2px #ccc;
                  box-shadow: 0 4px 4px -2px #ccc;
              }
              .main {
                  display: table;
              }
              .featured {
                  width:100%;
                  padding-top:10px;
                  display:table;
              }
              .featuredarticle {
                  min-width:22.5%;
                  max-width: 256px;
                  float:left;
                  padding: 0 .25% 15px 1.75%;
                  /*border: 1px solid #ccc;*/
                  display:table-cell;
              }
  
              .homearticle {
                  max-width: 48%;
                  margin: 0 .25% 15px 1.75%;
                  float: left;
                  display:table-cell;
              }
  
              article {
                  padding:0 7px 7px 7px;
              }
  
              .article_table {
                  display:table;
              }
  
              .content-wrapper {
                  display: table-cell;
                  width: 100%;
                  vertical-align: top;
                  white-space:pre-wrap;
              }
              ol, ul {
                  white-space:normal;
              }
  
              .sidebar-wrapper {
                  display: table-cell;
                  min-width: 350px;
                  vertical-align: top;
                  padding-left: 20px;
              }
  
              .copyright-l, .copyright-r {
                   width:50%;
                   float:left;
              }
  
              .copyright-r {
                   text-align: right;
              }
  
                  @media screen and (max-width: 1250px) {
                      .featuredarticle {
                          min-width: 47.25%;
                      }
                  }
  
                  @media screen and (max-width: 1024px) {
                      .hide-on-1024 {
                          display: none !important;
                      }
                      .homearticle {
                          max-width: 98%;
                      }
                  }
  
                  @media screen and (max-width: 700px) {
                      img.alignright {
                          width:100%;
                          height:auto;
                          float:none;
                          padding: 0 !important;
                          margin:10px 0;
                      }
                      .featuredarticle {
                          min-width: 96.25%;
                      }
                      .content-wrapper, .sidebar-wrapper {
                          max-width:100%;
                          display:table;
                          margin: 0 auto;
                      }
                      .copyright-l, .copyright-r {
                          width:100%;
                          text-align: center;
                          padding-bottom: 20px;
                      }
                      .hide-on-mobile {
                          display: none !important;
                      }
                  }
  `
  </code></pre>
  
  <p>Any help would be greatly appreciated.  Also take note that this is a redesign of a website that is in the early stages.  Just trying to keep everything in Google's guidelines as I go to avoid having to do larger fixes later on.</p>