I am getting the error in Google Page Speed Insights stating:
"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."
"The page content is 378 CSS pixels wide, but the viewport is only 320 CSS pixels wide."
I have the viewport set in the header as follows:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
I still have the issue when set it to only:
<meta name="viewport" content="width=device-width, initial-scale=1 />
One of the elements that it says along with many others is outside of the viewport is:
<a href="post-template.php...>US Carriers are...</a>
The site url mofiki.com/dev/aa/ is and my CSS is:
` .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;
}
}
`
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.
