Side menu does not display properly on mobile

Cardshifter / cardshifter.github.io

Cardshifter Website

Other

7 stars 0 forks source link

Side menu does not display properly on mobile #51

Closed Phrancis closed 9 years ago

Phrancis commented 9 years ago

I pulled the site on my iPhone and the side navigation menu is displayed on top of the page content. I'm not sure how to fix it exactly, I suspect it could even be caused by Bootstrap in order to make the page less wide.

A possible fix might be to extend the left nav menu bar all the way to the bottom of the page (albeit with empty space). See attached screenshot.

I would be curious if this problem also happens on Android, is anyone able to test pulling up http://stats.zomis.net/io-web on an Android device and attach a screenshot?

skiwi2 commented 9 years ago

The same issue appears to occur on Android:

screenshot_2015-05-23-20-43-50

Phrancis commented 9 years ago

For reference, this is what it should look like: screen shot 2015-05-23 at 2 45 33 pm

Phrancis commented 9 years ago

Bug also happens on Windows phone:

zqobg49

Phrancis commented 9 years ago

Looks like this is not a bug and actually functions as it should according to Bootstrap grid system. For reference: http://tutorial.shiksha360.com/bootstrap-layout-grid-system/

Perhaps at some point we should actually convert this to a top menu with drop-downs instead of a side nav... thoughts?

marcandregirard commented 9 years ago

The thing here is I don't think the side menu would fit with the content. There is not enough place to show them both side by side. I think it may look like a bug, but the result is what is better for mobile. What we could have is some links on mobile to get to the top of the page (the side menu) quickly to help the user navigate.