The online racing simulator
Forum page width not scrollable on mobile devices
I have a huge problem to use this forum on several mobile phones.
You can see the effect I describe by creating a smaller desktop window. There (at least in firefox) the width isn't scrollable like in other pages you test the same.
In the common mobile resultions that means you can just see like 3/4 of the page width.

The problem eixts in Windows Phone 10 Edge Browser and many less common Linux (Webkit Engine Browser) based Phones.
I had an android phone as well which handled these pages correctly (or worked around a problem on this site).

I'll give you more information if you need to.
It would be really nice if this problem could be solved.
Just had a look at the problem.
It is caused by the style

body { overflow-x: hidden; }

I don't know if you added this out of a special reason but please remove it.
Because this forum doesn't have a responsive layout this is a major problem some browsers just work around.
I think this has something to do with text reflow.
Just use Opera! No need for horizontal scrolling.

This, or I didn't understand your issue.
Can't remove the hidden overflow just like that. You'll get a horizontal scrollbar every time the car at the top moves to the right.
It can probably be fixed, but to do this correctly, and for devices other than desktops, a whole lot more needs to change. This is not very high on my list tbh. But it'll be looked at at some point.
..
..
Quote from Victor :...You'll get a horizontal scrollbar every time the car at the top moves to the right...

Now that you made me think about it, every time the top car moves, my Opera (on mobile) autoscrolls vertically towards the top of the page...very annoying!
Maybe it's better to completely remove the car on mobiles: I vote for this.
Quote from Victor :Can't remove the hidden overflow just like that. You'll get a horizontal scrollbar every time the car at the top moves to the right.
It can probably be fixed, but to do this correctly, and for devices other than desktops, a whole lot more needs to change. This is not very high on my list tbh. But it'll be looked at at some point.

Do not incorrectly take non appearing blaming/bug reports as non affecting users. It literally makes this forum unusable for a lot of mobile phone users. It annoyed me a lot and yet I was too lazy to post this for such a long time (sick combination I know).
I second the idea to remove the optional car content on phones and maybe tablets, it is also just creating additional mobile traffic.
I am home again and took another look. Indeed. Removing the overflow-x: hidden has a bad effect.
But why not moving it from body to #HeaderWrap.

I didn't see any side effect with the following change, while the page is being horizontal scrollable.


#HeaderWrap {
overflow: hidden;
background: #181818 url("/static/header/bg.jpg") center top no-repeat;
}

Any comment/fix on this? Seems to be a save one to me.
..
Quote from cargame.nl :He already did, it's not high on his list, so we need to wait until it gets high enough on the list Big grin

That's correct but post1902292 shows a new solution if he agrees.
And this one would costs him 5 min.
Quote from CLRS530 :That's correct but post1902292 shows a new solution if he agrees.
And this one would costs him 5 min.

I'm afraid that doesn't work. The car is cut off near the bottom then (see attachment).

I will have a look but just not now. Sorry if that annoys anyone, but i really don't have that much time to spare and have to prioritise.
Attached images
headercarcutoff.png
Quote from Victor :I'm afraid that doesn't work. The car is cut off near the bottom then (see attachment).

I will have a look but just not now. Sorry if that annoys anyone, but i really don't have that much time to spare and have to prioritise.

You are right I didn't notice. On most cars just the shadow misses some pixels.
But I now got another idea which fixes this.
The bad behaviour seems to just occur because you set the overflow-x on the body. If I set it on #SiteWrap I get a scrollbar on desktop small width. Guess it will be the same on mobile browsers.
Well, when you do get the time Victor, I'm another person who would be very happy if the mobile-friendliness factor went up a few notches Wink
Could you have another look now ?
I am pretty sure I did not miss something in my last response which would be an easy fix as well.
It is just too annoying...
Another 1,5 month passed.
..
Thank you for the information.
One week more or less won't make a big difference now. Wink
** Best answer **
Here again the fix:

Remove:


body {
overflow-x: hidden;
}


Add:



#SiteWrap {
overflow-x: hidden;
}

Removing horizontal scrolling on the outer html tag breaks the ability to scroll content not just on many phones (not being android/iOS). The same behaviour occurs on desktop browsers in low resolution and in window mode. The problem makes sense if you think about and for android/iOS it should be called a work around that it works as intended in this use case.
Bump the next 1,5 month
Ok I've applied your suggested fix. Does it work on your phone(s) now?
Looks good now, thanks.
I am now unable to remember the exact issues I had Smile
I think one issue was it not scrolling: now fixed, yay, thanks!
Second issue remains, but less critical, which is that the messages display in a huge, wide box which is mostly empty, containing teeny tiny text which often fits onto one really long line, instead of a nice-sized font which wraps onto a few lines. But maybe my phone sucks Wink
..

FGED GREDG RDFGDR GSFDG