Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #249423

    Google PageSpeed Insight report –
    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 480 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:The element <span class=”avia-menu-text”>Home</span> falls outside the viewport.
    The element <span class=”avia-menu-text”>Services</span> falls outside the viewport.
    The element <span class=”avia-menu-text”>Portfolio</span> falls outside the viewport.

    I’ve noticed this – the menu is on the right hand side hidden, but you can scroll to see it. If the menu button is tapped, it will slide out. Your website has the same issue reported.

    Thanks

    #249544

    Hi xyzb!

    Thank you for using support forum!

    In my opinion this is not really a big deal as long as you can see the content on mobile devices with 320px screen width. Please try to add this on Quick CSS or custom.css:

    @media all screen and (max-width: 380px) {
      .responsive .container {
        width: 300px;
        margin: 0 auto;
      }
    }

    This will force the container to resize to 300px on devices with 380px screen width or less.

    Regards,
    Ismael

    #384254

    I added the codes above on Quick CSS or custom.css, but I am still not able to fix this problem. What else I can do?

    #384256
    This reply has been marked as private.
    #385232

    Hi!

    I can’t see the issue with your menu. It seems fine to me. Could you fix it already?
    If not which browser are you using? please show the issue using screenshots, you can host them on imgur.com

    Best regards,
    Andy

    #385975

    Hi Andy,

    Thank you for your reply. Yes, the page is able to be view on mobile devices. However, my concern is that Google Page Speed insight results still show and error regarding viewpoint size. I would like to clear this error message. In my initial questioning I noted that a previous user noted that one should add the following:

    @media all screen and (max-width: 380px) {
    .responsive .container {
    width: 300px;
    margin: 0 auto;
    }
    }

    However, when I added this code the error regarding viewpoint size was still there – is there a way to clear this completely?

    Thanks.

    #386626

    Hi!

    Your seeing scroll bars? We have some css, overflow: hidden, on most of our container elements so there should not be any scroll bars. Can you send us a link so we can take a look?

    You can try adding this to your custom CSS so the cart button is not hanging over on the right side at the start but it’s not a big deal. It does not have any impact on the speed of your site.

    .responsive #top .cart_dropdown { right: 20px !important; }
    

    Best regards,
    Elliott

    #411338

    Hello,

    Found this topic yesterday and tried solutions from Kriesi. None of them worked, so I spent the last 3 hours solving this problem. Here’s my solution.

    The fact that the viewport is 480px and not 320px is linked that the menu is scaled at 50% when hidden on the right, adding 160px to the width.

    There are 2 rules which were not abided by ENFOLD linked to this problem

    1) Size tap targets appropriately

    This one is easy to fix. Just need to change all the scale(0.5) by scale (0.1) in CSS.

    2) Size content to viewport

    To fix this one, you need to hide the menu on the top of the screen, not on the right.
    Google does not seem to care that content is hidden above the screen.

    so instead of having thing like:

    width:100%
    right:-100%

    and
    -webkit-transform: translate(-100%, 0);

    you will have

    height:100%
    top:-100%

    and
    -webkit-transform: translate(0,100%);

    Final code

    #mobile-advanced{
    width:100%;
    top:-100%;
    height:100%;
    position: absolute;
    z-index: 1000;
    padding:89px 0;
    overflow: hidden;
    border-left-style: solid;
    border-left-width: 1px;
    margin:0 0 0 -2px;
    -webkit-transform: 	scale(1);
    -moz-transform: 	scale(1);
    -ms-transform: 		scale(1);
    transform: 			scale(1);
    -webkit-transition: all 0.6s ease;
    -moz-transition: 	all 0.6s ease;
    transition: 		all 0.6s ease;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    display:none;
    }
    
    #mobile-advanced.large-sceen{
    height: 34%;
    top: -34%;
    }
    
    .show_mobile_menu{
    overflow: hidden;
    }
    
    .avia_transform3d #mobile-advanced{
    -webkit-transform: 	scale3d(1);
    -moz-transform: 	scale3d(1);
    transform: 			scale3d(1);
    }
    
    .show_mobile_menu #mobile-advanced{
    -webkit-transform: 	scale(1);
    -moz-transform: 	scale(1);
    -ms-transform: 		scale(1);
    transform: 			scale(1);
    -webkit-transform: 	translate(0,100%);
    -moz-transform: 	translate(0,100%);
    -ms-transform: 		translate(0,100%);
    transform: 			translate(0,100%);
    }
    
    .avia_transform3d .show_mobile_menu #mobile-advanced{
    -webkit-transform: 	scale3d(1);
    -moz-transform: 	scale3d(1);
    transform: 			scale3d(1);
    -webkit-transform: 	translate3d(0, 100%, 0);
    -moz-transform: 	translate3d(0, 100%, 0);
    transform: 			translate3d(0, 100%, 0);
    }
    #411825

    Hey!

    Thanks for sharing. :)

    Regards,
    Ismael

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.