CSS to show status bar on mobile devices

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:


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

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


1 Like

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

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

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):

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

1 Like

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.