Responsive Grid doesn't work on Mobile devices

[sazzer]

Bug Report

I'm using a Mobile Responsive Grid, so that when my page is rendered on a large screen I get two columns side-by-side and on a small screen they are stacked. This seems to work, but only when rendering in "Desktop Mode" (Whatever that means)

Steps to reproduce

Exact markup that I'm using:

        <div class="ui mobile reversed stackable grid container">
            <div class="four wide column">
                {% block menu %}{% endblock %}
            </div>
            <div class="twelve wide column">
                {% block form %}{% endblock %}
            </div>
        </div>

Expected result

When rendered in a normal desktop browser:

When rendered in Desktop Chrome, in Responsive Mode set to Desktop:

Actual result

When rendered in Desktop Chrome, in Responsive Mode set to Mobile:

Rendering this in Android Chrome on my actual phone always looks like this, regardless of whether Desktop Mode is ticked or not.

Testcase

The exact code used is above. Jsfiddle doesn't seem to work great to replicate mobile-mode issues though, since it doesn't work in that mode.

Version

Fomantic UI - 2.7.8

[lubber-de]

Jsfiddle doesn't seem to work great to replicate mobile-mode issues though, since it doesn't work in that mode.

It does, just append "/show" to the jsfiddle URL

[lubber-de]

Please provide a jsfiddle with your content, because i believe your issue is related to the used content inside the columns.
Using only your little code above results in a fine working behavior:

https://jsfiddle.net/btc2rue0/
https://jsfiddle.net/btc2rue0/show (for mobile view)

[sazzer]

Ok - the "/show" bit I didn't know about, but very worth knowing :)

Curiously, the exact markup that I'm using in reality - I literally copied it out of Chrome Developer Tools - works fine in jsfiddle but not in my app - both when running in Chrome Desktop using Mobile Mode. The Jsfiddle also doesn't work on my actual phone, so it does reproduce the issue somewhat.

That markup is at https://jsfiddle.net/jrLkwmu2/2 (And https://jsfiddle.net/jrLkwmu2/2/show for mobile view)

Cheers

[sazzer]

Screenshot from my phone of the Jsfiddle page:

[lubber-de]

Basic solution: Use five wide column and eleven wide column instead, because your menu content does not fit. See https://jsfiddle.net/58op7kc6/

Other than that your fiddle worked completely fine for me on my mobile phone.
Your mobile browser is probably configured to force Desktop Mode. Only then, i can reproduce your issue.

[lubber-de]

Closing because reason of behavior was found and solution provided.