Marco Di Bella

Thank you for your reply

However, there might be some conflicting issues that are causing the broken layout for the Rank Math Overview dashboard widget.

I can definitely exclude a conflict.

As you may have noticed from the screenshots, the problem occurs in the context of the German translation of the dashboard titles.

In this case, we are talking about the translation of “total impressions” (“Gesamtimpressionen” in German). As you notice, the German expression is not only longer, but consists of only one word. This in turn leads to the fact that in a certain constellation the width of this term is larger than the intended width of the surrounding div container. Due to the now missing line break (as in English) and also not existing hyphenation, the (now enlarging) container displaces its neighbor

About the constellation: The problem occurs when the browser size is changed in such a way that the display in the dashboard changes from 3 columns to 4 columns (or from 2 to 3). Especially at the beginning of the change, the individual columns – whose widths adapt responsively – have significantly less space available for their content.

Other languages do not seem to be affected by this, as the corresponding terms in the widget appear there in English. However, they could be in the future if one decides to translate.

<span style=”text-decoration: underline;”>Alternative solution proposal 1:</span> (not so good)

The affected terms are not translated, i.e. remain in English, where the calculation of the word width does not seem to cause any problem at all.

<span style=”text-decoration: underline;”>Alternative solution proposal 2:</span> (better)

Instead of the solution mentioned in the former post, the following code is set:

#rank_math_dashboard_widget .rank-math-dashboard-block > div h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #5a5d70;
  hyphens: auto;
}

As you can see, only the statement hyphens: auto was added here. This should be the smallest possible intervention and also does not ensure that the div structure is changed.

“Solved” it with creating [posts] shortcodes for any single post id.

Problem still exists in 4.9