移动网站滚动问题

Question

Im building a website www.nutcraft.co.uk/shop.html and it is behaving ok in normal browsers, however when viewed in mobile browsers it will not scroll and the content is locked at the top of the screen.

Ive read around trying to figure this fix out but I am at a loss. ( know I have to clean up the div tags etc, but Im more of a designer than a coder and my head is spinning)!!!

Any help would be greatly appreciated.

Answer 1

You have an inline style with body overflow:hidden only in your mobile view. This is added by the grid system's javascript (you are using something called 5grid). Either there is a problem with the grid system javascript, or you are missing some component. I am not familiar with 5grid, so I am not able to say whether their grid system is robust or not.

I tried to find out more and didnt find anything online about it. So without the documentation, there is nothing I can do to help except guess that the grid system wasn't tested cross mobile maybe? It seems to use a lot of touch based javascript.

If it were me I would have preferred media queries over javascript solution when it comes to making a site responsive.

If you still want to use the grid system, you can add a css style with:

overflow:visible !important;

to your body tag. That should solve the problem hopefully. But please check if that affects the site experience in the mobile devices in which it already works.