Hi,
For mobile view we get the error:
“The page content is 412 CSS pixels wide, but the viewport is only 411 CSS pixels wide. The following elements fall outside the viewport”
The element <span class="vc_sep_line"> falls outside the viewport.
How to fix please?
Hello iisnet,
Please provide your website your website with an example so I can inspect it closer and also, so I will be able to provide a more accurate response. Also, you can provide some useful screenshots with the problem for a better understanding.
Thanks for the message!
Hi,
The error is reported using google pagespeed for mobile devices.
The website url: https://www.crownhosting.co.uk
Hello iisnet,
Please notice that the speed of your website depends on how well your site is optimized. Please notice that this is not a simple task and if you do not have any experience in this regard you will do not bring good results for the theme. Also, notice that we have a speed optimization tutorial but this is addressed only to advanced users. So, if you follow the steps which are presented in this tutorial here -> https://forum.tagdiv.com/how-to-make-the-site-faster/ you can increase the page speed loading and if you are not aware of the steps in this regard, please consider hiring a freelancer/developer to help you because the speed optimization services is not covered by our support policy, as you can read here -> https://forum.tagdiv.com/support-policy-2/ Check our documentation here -> https://forum.tagdiv.com/requirements-for-newspaper/ regarding on dedicated server to fit to our requirements.
Hope this helps!
Thanks for your understanding!
Hello,
Were not that concerned about increasing the page load speed, but are just wanting to get the mobile view fixed:
Do you know what we have to adjust to get the viewport correct?
“The page content is 412 CSS pixels wide, but the viewport is only 411 CSS pixels wide. The following elements fall outside the viewport”
The element <span class="vc_sep_line"> falls outside the viewport
Hello iisnet,
Please try to use the code below and place it in Theme panel->Custom CSS area. It happens due to the Separator element from Visual Composer which has width:100%.
@media(max-width:767px){
.vc_separator .vc_sep_holder .vc_sep_line {
width: 99%!important;
}
}
Hope this helps and let us know how it goes!
Thanks for the message!
Hi,
It didn’t work, now get a slightly different error:
The element <span class=”vc_sep_holder vc_sep_holder_r”></span> falls outside the viewport.
Also this line in the custom css throws up a warning message: ‘use of !important’
width: 99%!important;
Hello iisnet,
After further investigation, it seems to be a mini issue with the separator with the title if your title is too big. I have tested on my side, and it occurs this behavior. As a quick solution, you will have to try the following code and place it in Theme panel->Custom CSS area.
The code is ->
@media(max-width:767px){
.vc_sep_width_100, .wpb_single_image img.vc_img-placeholder {
width: 90%;
}
}
Hope this helps and let us know how it goes!
Thanks for the message!
Hi,
Thanks very much, that worked. Although we did get a warning in the custom css panel about ‘img.vc_img-placeholder’ being ‘over qualified’. So we just remove the ‘img’ part leaving: .vc_img-placeholder
Thanks again for your help 🙂
