Annoying design flaw mobile forum

Hi,

There is a annoying web design flaw in the mobile phone (portrait mode) forum design that is causing horizontal scroll in the mobile (phone) browser. The effect is that when you scroll up or down the page is moving to the right or left. Most users use portrait mode on their phone so that has to be taken in account when designing a website.

The cause is that the content is to wide for the view port, because of the “profile image”, “Views” and the “Time stamp” next to the post.

The solution is simple and can be done with a media query and some lines of CSS that is placing the above named items at the bottom or on top of the post instead of next to it at a certain device width (around 380px/500px)!

When you show this to your web designer he or she can fix it in a couple of minutes.

Regards & Thanks,

David

I have no problems with Chrome on Android but general settings should be set to Text Zoom of 100% and to Force Enable Zoom as some websites request the browser to Zoom.

Hi Don,

With all due respect I’m a professional webdesigner and the user should not have to set anything! The website has to fit automatically to the view port of any device.

And it is easily done with a couple of lines of code and some creativity.

https://developers.google.com/web/fundamentals/design-and-ux/responsive

Regards,

David

I believe the forum software is by Discourse at discourse.org

Made you a screen movie in Chrome dev tools of the demo from discourse.org and you can see
that it works flawlessly without horizontal scroll. Something is wrong in your forum design.

Unfortunately I’m not allowed to upload a screen video, but anyway when you go to this URL:
https://try.discourse.org/

And open the page in Chrome Windows on the desktop:
More tools > Developer tools > click the responsive icon (2 mobile devices in portrait mode) > Choose in the middle of the top screen your mobile device (iPhone 6/7/8 for example) and notice there is no horizontal scroll on neither the main forum page as in the individual posters page.

Now try the same with the Topaz Forum page and you notice there is something wrong, because there you see horizontal scroll.

This implicates something in the original code from the discourse forum framework is changed for the worse.

Made a screen shot in Apple Xcode simulator on my iMac.

The right arrow points to the horizontal scroll of the Topaz forum.
The left arrow points to the normal scroll at the discourse forum demo.

Also notice that the content on the discourse example is a 100% width and looks beautiful.
Somehow someone who has excess to the website server of the Topaz forum changed the CSS.

When you look closely to both designs you notice multiple differences like for example the profile image outside the content area on the Topaz forum site.

I hope you understand my point now. Even without knowing the discourse framework you pointed out to me I could tell you the design is wrong and not user friendly.

On the discourse demo you see the icons underneath the post like my earlier suggestion.

Regards,

David