Nav wrapping in small window with long translations of "login"


(Grzegorz Tańczyk) #1

Site logo and icons do not play together well on small screen.

Expected:

  • either scale logo or use the smaller one

Screenshot from Android:

Workaround:

Thanks!


(Nate D.) #2

Jep same here. View when you’re logged in:


(Mittineague) #3

Is this Mobile view or a narrowed Desktop view only?

If Desktop, is it “normal use” to have the viewport so narrow?


(Nate D.) #4

Oh so true. On mobile there is no problem and on the desktop you should never have the window that narrow. But thats just for me, I dont now if @gtanczyk uses narrow windows…


(Grzegorz Tańczyk) #5

Screenshot was done on desktop, however it’s the same on mobile browser, when your logo width exceeds some threshold.
Please also mind I18n translations for Log in, Sign in buttons. In polish language it is “Logowanie” and “Rejestracja”, which takes few more pixels than corresponding english words.


(Jeff Atwood) #6

This is not a bug report, the layout is different in mobile. Please provide mobile screenshots, a tiny desktop / laptop / tablet width makes no sense.


(Grzegorz Tańczyk) #7

Hello, I have uploaded screenshot from mobile.


(Jeff Atwood) #8

In the case of long translated words, if in your language “login” is “mshehjensgsybsnjjebeggsjksoeomendmxkskelflr” you will need to set a max-width via CSS on the relevant controls, or make the mobile logo width smaller via CSS.


(Grzegorz Tańczyk) #9

Thanks for providing workaround.


(Jeff Atwood) #10

More specifically, now that I am not on an iPad but in front of a real computer, these CSS rules already exist, so you can amend them or add to them in Admin, Customize, CSS/HTML:

.d-header button.login-button {
    margin-left: 7px;
    max-width: 75px;
    white-space: nowrap;
}

here we set a max width on login-button and indicate the text should not wrap to the next line.

.d-header #site-logo {
    max-width: 125px;
}

there is already a max-width specified for the mobile logo CSS, so you can make it smaller as needed with a CSS override.


(Grzegorz Tańczyk) #11

How about using display: table and display: table-cell along with white-space: nowrap? I am also thinking about text-overflow: ellipsis and max-width on “Log in” button.

Perhaps this way there will be no need for CSS overrides. I will test it today and maybe start a PR.


(Jeff Atwood) #12

Be careful, changes to header can be very dangerous, as we have seen from our (1st and 2nd failed) attempts to use flexbox in the header…