Header Tagline not wrapping correctly in Chrome & Opera

The quick fix would be to add:

.navbar-wrapper .navbar h2 {
padding-right: 40px;
}

That will change FF too but it looks OK to me (maybe not you!)

I’m a (lapsed) Certified Graphoanalyst so I understand something about handwriting. I’ll have to look around your site, looks interesting!

Thanks for the suggestion. Yeah, doesn’t look as good in FF and Safari, but it’s OK. Must be a Chrome bug for OpenType ligatures.

Also, since I’m not using all the Social icons, I shifted the allocation of the Tagline to give it more room.

/* To fix the text-overrun Tagline in Chrome */
.navbar-wrapper .navbar h2 {
padding-right: 35px;
}
.row-fluid .span7 { /* give more space to the Tagline */
width: 75%;
}
.row-fluid .span5 { /* and less to social icons */
width: 20%;
}
/* End of fix the text-overrun Tagline in Chrome */

Don’t think I should be changing the span distances, though. But I can change to a different span combination, right?

This seems to work best.

/* To fix the text-overrun Tagline in Chrome */
.navbar-wrapper .navbar h2 {
padding-right: 35px;
line-height: 1;
}
.navbar .span7 {
width: 75%;
}
.navbar .span5 {
width: 20%;
}
/* End of fix the text-overrun Tagline in Chrome */

Nothing wrong with what you’ve done, though might be seen as inelegant by pros!

This Snippet explains the grid structure in Czr

To do it properly, you’re going to need some php coding to change the span(x) to span(y).

So either stick with your inelegant solution, or continue with this Guide

Yeah, I don’t like the idea of modifying the pre-defined .spans. I’ll check out the guide. Thanks!

The padding (currently set at 35px;) makes this worse for me in OSX/Firefox.

Firefox is worse than Safari on OSX because they include the scroll bar in the width, unlike Safari, so the actual window is around 15px smaller. (We really are at this level of messiness in 2014; incredible.)

I would set the padding at 0 and simply reduce the size of the font on the tagline:

.navbar-wrapper .navbar h2 {
    font-size: 20px;
    padding: 0;
}

(And more white space around it makes it look better).

For the navbar, removing the margins and padding bring it back onto one line just before the breakpoint:

.navbar .nav {
   margin: 0;
   padding: 0;
}

ElectricFeet, I tried to change padding to 0, but it runs off the edge of the window in Chrome.

You also need to reduce the size of the font. It’s simply too big for the space available.

Been doing more experiments with Chrome, and it seems that Chrome is wrapping the text line BEFORE applying ligatures, or font features. All other browsers are wrapping correctly by applying the font features and THEN determining the length of the line.

Since the actual character glyphs can change (along with the character widths) once OpenType font features are enabled, Chrome is adjusting the text wrap on incorrect information.