Hero headers not rendered correctly on Android Chrome

[ghost]

Long words in hero headers increase window width, so some horizontal scrolling occurs. This makes the hamburger button of the menu disappear on the right border, so the site seams to be without menu. Not so experienced users will not find the menu. This happens with Android Chrome, not with iPhone Safari.

My workaround where ­ in the words and an addition to _framework.scss:

// for small width on android chrome
@media (max-width: 600px) {
  .hero {
    h1 {
      font-size: 3rem !important;
    }

    h2 {
      font-size: 1.5rem !important;
    }

    h1 + h2 {
      margin-top: -25px !important;
    }
  }
  // from _typography.scss
  .title-h1h2 {
    h1  {
      font-weight: 200 !important;
    }
  }
  .title-h1h2, .title-center {
    h1 + h2 {
      font-weight: 500 !important;
    }
  }
}

From typography view this corrections do not look bad, IMHO.

See _framework.zip

[ghost]

I recognized that _framework.scss of https://demo.getgrav.org/onepage-skeleton/ has similar rules with @include breakpoint, that scale the header fonts. Seems to be already fixed in _framework.scss in Quark theme.

Found it: duplicate of getgrav/grav-theme-quark#28