Mobile organization and issue with news tab

[astonishedman]

I'm using v5 Connect and everything is installed and running. Have a few issues I am working through and was hoping for some help.

1. I'm having an error on the menu bar. When you click on the "News" tab it goes to the news, but the "Forum" tab is still highlighted with the forum submenu showing instead of highlighting the News. How can this be fixed. Here is a link to my forum: http://uberdrivers.com/forum


2. When viewing on a mobile phone, the right columns of browser mode appear first in the layout. This is causing some users to complain that they cannot see the content they are trying to view without scrolling forever. For example, if you click a news article to read you may have to scroll past "Channels" "Categories" "Article Tags" "Latest Articles" etc to get down to the article or post. There is enough negative feed back to warrant doing this differently. Maybe if they dropped below the content instead. How can this be changed?

Also having some problems with Facebook Connect in some browsers. Don't have enough data to outline the issue yet. Will do some more testing.

[astonishedman]

1. Solved: I had changed the URL to "news" and though it would go to the correct page it would not highlight the tab. I switched it back to "articles" and it now highlights. I guess it is fine like that.

2. Solved enough: I just arranged the modules on the pages to drop it under the main content even on browser pages. It would have been ideal to only do this for mobile, but this is fine.

[Wayne Luke]

#2 is a known issue. http://tracker.vbulletin.com/browse/VBV-9852

[glennrocksvb]

#2 issue might be solved without re-arranging the markup by using CSS Flexible Boxes

https://developer.mozilla.org/en-US/...Layout_example

[glennrocksvb]

#2 issue might be solved without re-arranging the markup by using CSS Flexible Boxes

https://developer.mozilla.org/en-US/...Layout_example

I tried it and it seems to work.

@media only screen and (max-width: 767px) {
    .canvas-layout-container .canvas-layout .canvas-layout-row.has-columns {
        display: flex;
        flex-flow: column;
        height: auto;
    }
    .canvas-layout-container .canvas-layout .canvas-layout-row.has-columns .canvas-widget-list.section-0 {
        order: 1;
        flex: 0 1 auto;
    }
    .canvas-layout-container .canvas-layout .canvas-layout-row.has-columns .canvas-widget-list.section-1 {
        order: 2;
        flex: 0 1 auto;
    }
}

This CSS is specifically tailored for the default layout on homepage. You may have to tweak if you have a different layout.

[Wayne Luke]

#2 issue might be solved without re-arranging the markup by using CSS Flexible Boxes

https://developer.mozilla.org/en-US/...Layout_example

I've suggested that in the past. Browser support is a concern. However the simplicity of using Flexbox is very tempting with today's mobile internet.

[glennrocksvb]

I've suggested that in the past. Browser support is a concern. However the simplicity of using Flexbox is very tempting with today's mobile internet.

caniuse.com says flexbox is supported in iOS Safari 3.2 - 6.1 (old flexbox spec), 7.1 - 8.1 and Android Browser 2.1 - 4.3 (old flexbox spec), 4.4.x and Chrome for Android. So mobile support is pretty decent.