Titles Popping out of the Frames

If you’re using German or some other language with really long words in some of our WordPress themes, chances are, you will have issues with texts popping out of title frames.

Shaka – Beach Business WordPress Theme Demo

How to solve this?

Luckily, there’s a simple CSS trick anybody can use.

The CSS rule word-break: break-word;  needs to applied to selectors for titles in question.

In our WordPress theme for surfers, Shaka, you might have the following examples for front page and blog:

.latest-news__title a {
  word-break: break-word;


h1, h2, h3, h4, h5, h6, hentry__title, .hentry__title a, .latest-news--block .latest-news__title a, .latest-news--more-news, .page-box__title a, .sidebar__headings {
  word-break: break-word;

Insert such CSS code in Customize > Additional CSS if you’re using WP 4.7 or later.

You can find other CSS classes / selectors with Chrome dev tools, and it is not that hard, try it. Here is one simple video tutorial how to do that: https://www.youtube.com/watch?v=V2aAEzlvyDc