Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 9, 2014 at 9:56 pm #249423
    xyzb

    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

    April 10, 2014 at 2:34 am #249544
    Ismael

    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

    January 23, 2015 at 9:45 am #384254
    kyo2013

    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?

    January 23, 2015 at 9:46 am #384256
    kyo2013
    This reply has been marked as private.
    January 26, 2015 at 2:04 am #385232
    Andy

    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

    January 27, 2015 at 4:03 am #385975
    kyo2013

    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.

    January 27, 2015 at 10:02 pm #386626
    Elliott

    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

    March 14, 2015 at 12:19 am #411338
    tde

    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);
}
    March 16, 2015 at 4:05 am #411825
    Ismael

    Hey!

    Thanks for sharing. :)

    Regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.