14

When a site has a "system message" shown (such as the message shown on recently launched beta sites, like Vi/Vim), the mobile layout suffers:

message

Compare the above with how the mobile navigation bar normally looks:

normal

Worse yet, a selected tab on the navigation bar is shown in white on white:

selected

Observed in mobile Opera 27 on Android, and also in desktop Chrome 41 on Chrome OS, from where the screenshots are taken.

The problem is that <div class="system-message-container"> is positioned where the navigation bar is supposed to be; if it is deleted, the normality is restored.

Improve this question
3
  • Yes, reproduced.
    – nicael
    Commented Mar 1, 2015 at 7:09
  • 1
    +1 for this as I posted the same (dupe accepted min ago) today. It's been over 5 months...
    – HackerKarma
    Commented Aug 2, 2015 at 1:37
  • The. Bug. Is. Finally. Fixed. (because of the 10M banner on SO)
    – user259867
    Commented Sep 13, 2015 at 0:32

1 Answer 1

Reset to default
3

Here's a simple CSS fix:

.nav { clear: both }

P.S. You can currently reproduce this bug on Stack Overflow by switching to the mobile view, thanks to the "ten million questions" announcement. Here's a pair of screenshots showing the SO front page with and without this fix (taken using the Firefox dev tools, in responsive design mode):

Screenshot of Stack Overflow mobile view with CSS bug     Screenshot of fixed Stack Overflow mobile view

Improve this answer
0

You must log in to answer this question.