Site banner title wrapping too aggressively on mobile

UX
1

For a while now (see this post), the banner title on my forum has been wrapping too aggressively on my mobile device:

wrap%20too%20aggressive

There appears to be plenty of space for the word “Online” to flow into (I measured!), but it’s wrapping instead, intruding onto the UI elements below (also it just looks bad). I upgraded my Discourse install this morning and the issue is still there. I had not had an issue with this for the first year or so of using Discourse; the title flowed on one line across the whole banner. It was the upgrade I performed in February that changed the layout.

Is this intended behavior? If so, is there a way I can adjust the layout to prevent the aggressive wrapping in my own installation?

My mobile platform is Chrome 67.0.3396.87 on Android 8.1.0 (moto x4).

2

I highly doubt that would fit. Looks suuuper tight. I suggest an image logo which would fit better, or shorter text.

You could override with local css customizations of course but that looks very VERY tight to my eye.

2 Likes
3

This may have happened when we bumped up the font size on mobile by 1px from 14px to 15px (to make it a bit easier to read).

You could size the header text down using

.d-header {
    font-size: 14px;
}

or all text on mobile

.mobile-view {
    font-size: 14px;
}
5 Likes
4

I admit: I’m not a designer, so I don’t have good intuitive sense on this. This is what it looks like when I move it in MsPaint:

Screenshot_20180627-094359

Still seems like a decent amount of room to the magnifying glass, but maybe not.

I’ve tried an image banner and could not get results that I liked on both mobile and desktop (but again: not a designer). I’ll try fiddling with the font size.

Thanks to you both for your responses!