long word in title needs optimized page component widths

Hi

Thanks for this brillant template! I will reward this for sure and if I could, I would give 6 stars. Nevertheless I’m facing the following two problems.

I want to use pages and love the thing that the title of the page, the description and the social icons are on the left as long as there is enough space and that these elements jump to the top, when the page with is to small or viewed on smart phones.

Problem 1:
I have the word “Geburtsvorbereitung” in the title, in German a word with a common length, as we write words like “page width” as one word “pagewidth”. The .site-branding pane on the left where the title is located is only 25% wide. While the description text with it’s small font fits this width easily and is able to look great until the elements jump to the top, the title overlaps the page content in the 75% right hand side at any size of the screen. One solution could be a 50%/50% split of the page width or a split where the longest word of the title is taken to set the minimal width.

Problem 2:
When the webpage is displayed on an iPhone the title is not centered on the screen, even the word “Geburtsvorbereitung” with the nice bold font would fit the screen perfectly.

I’m looking forward to your answer / solution. Many thanks.