Site does not scroll on mobiles

My site works well on computers. But using a mobile phone the site does not scroll, only the first two items load.

Is there any solution to resolve this?

http://stevenredhead.com

Any ideas would be welcome as I tried to find the issue unsuccessfully.

Hi there @sredhead. It looks as though you need to make your site responsive. As a start try searching the forums for responsive and see if any of the topics can get you started…

Ditto @Gandalf’s observation.

Your site claims to use a responsive HTML5 grid system but it does not appear to have been implemented with responsiveness in mind. Nor was it written with valid code in mind. 87 HTML errors.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fstevenredhead.com%2F

Personally, I do not understand how a web SITE can be developed this far and only now is responsiveness being considered… as if it’s an afterthought. It doesn’t work that way.

After you clean up the many significant errors in the HTML and READ the instructions for using the grid system that you chose, you might be able to make this work. I don’t know because I am not familiar with your grid system.

Frankly, this looks more like a link drop ad than a legitimate trouble to me. If this is a real issue, then it’s very late coming to anyone’s attention.

Good luck.

2 Likes

Thank you for your ideas. I appreciate your input.

Thank you for taking the time to respond and check out the site.

The site was started in 1998 and the rights were transferred from the registrar to me in 2000. So it contains lots of add-ons over the years that have become so intricate it is hard to figure out how to deal with the issues that have arisen over the years.

The main page that I referred to was working fine on mobiles at the previous hosting company, I am not sure if corruption occurred when the entire site was transferred as it composes of 1.3 Gb now. The page in question was a template I got and was not coded by myself, so I am struggling to figure out where the issues are that cause the scrolling issue.

It is only recently that I found it was no longer scrolling on mobiles. I found some errors but as you pointed out it seems there are more. I actually feel the page is too extensive also to send to mobiles, so I will look into making an independent simplified mobile site.

I had previously worked through a list of errors, but it seems as you pointed out there are more.

Other parts of the site use a different template and these load all right. So one option is to switch the content there. I thought that to resolve the scrolling would have been a simple to solved issue.

You seem to have a separate mobile site which scrolls vertically fine on my iphone but there is an issue half way down the page where you have a table with two horizontal cells that stretch the page wide and disappears out of the right side edge of the phone. You can’t scroll to the right because your body and the wrapper have overflow:hidden.

You need to write some rules for the table so that you turn the two table-cells into one column (set the table,tr and td elements to display:block). The table cells contain two images which when side by side are much to wide for the viewport.

The table starts with “Life wan’t really meant to be that difficult” in both cells side by side.

You do have literally millions of errors in that mobile page and you have the most nested uls that I have ever seen with another ul nested at the bottom of each ul. Most of the uls are broken and incorrectly nested with other tags also. However the main issue is the wide table at the side.

I’ve only tested in my old iphone so indeed other devices may choke on other broken rules but you should fix that table as the first resort.

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.