CSS to show status bar on mobile devices

Share & showcase
,
1

I just learnt about this solution from @Felipe over on Github.

Apparently, the status bar is simply hidden on mobile devices, and this CSS snippet can make it visible:

.is-mobile .app-container .status-bar {
	display: flex;
}

This is immensely useful on devices like iPads! :tada:

See the following if you don’t know how to add and enable CSS snippets:

2 Likes
2

Promising, but the mobile toolbar gets in the way/last row is overlapped.

image
image1536×684 101 KB

Okay – hasty again – fixed with Bottom Offset in Commander:

image
image1536×663 154 KB

Better:
image
image1536×697 89.1 KB

1 Like
3

Oh yeah, didn’t notice that since I use an external keyboard with my iPad.

4

Thanks for sharing the Commander solution!
As for those who don’t use Commander, I suppose some CSS tweaks could probably solve issue.

5

I don’t actually like that padding and I have 3 rows of icons so even less screen real estate remains for editor (I am using an iPad mini in portrait mode).
So I kind of bailed out for now and have this (for more of a separation kind of thing):

image
image1536×561 79.7 KB

Where the CSS fix is even more needed is the sidebar, when if it’s pinned, it looks like this:

image
image1536×455 123 KB

1 Like
6

I work with the status bar hidden when it covers the screen.
It is convenient to define a hot key in the hider plugin that supports hiding the status bar.