H1 header is cut off mid-word on mobile

[konradvg]

Hi, I have an issue on this site I’ve created for a client. The words in the second header on the page are cut off mid-word when viewing it on a mobile etc. Here’s an example: http://smartpoolsolutions.com/en/swimming-pool-services-costa-brava/costa-brava-energy-efficient-swimming-pool-pumps/ – notice how it reads:

SAVE ENERGY WITH
EFFICIENT
SWIMMING POOL PUM
PS

Any idea why it cuts off ‘PUMPS’ instead of just dropping it to the next line?

Thanks for your help,

Konrad

[konradvg]

Thanks to all who have kindly replied to this question (for some reason I cannot see the replies on this thread?!?).

The strange thing is, I can’t see any of the characters that you mentioned in the WP editor when switching to text view ( see code below). Any ideas?

”’

Save energy with efficient Swimming Pool Pumps

<

div class=”page” title=”Page 1″>

<

div class=”layoutArea”>

<

div class=”column”>

Did you know that the typical pool pump

• Uses the most electricity out of ALL your appliances?
• Accounts for 1⁄4 of the energy used in your home?
• Equals the energy consumption of 3 refrigerators?

”’

Thanks!

[JeroenR]

Because of this line in style.css:

.break,
p,
ul,
ol,
dl,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
    word-wrap: break-word;
    word-break: break-word;
}

That’ll break your words when they don’t fit in the width that is offered.

[Author]

Posts