Title doesn't fit in small screens (smartphone)

[NicolasBaldi07]

#640573

Hi guys,

I’m looking for help about the following problem :
This page has a title called “Accommodation” that doesn’t fit entirely on smaller screens.

I’ve noticed this on a 5′ smartphone screen and also when reducing the Chrome window to the narrowest.
How do I get it to take two lines instead of being cut off ?

Ps. I wouldn’t like to reduce font size. Just to make a new line below

Thanks for any help you can get me 🙂
Nicolas

[marklchaves]

#640683

Hi,

To break up your long word, you can set a word-break CSS property to something like break-all or break-word.

See more here https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

E.g.

/* CSS */
.break-all {
  word-break: break-all;
}

<!-- HTML -->
<p class="break-all">Accommodation</p>

And, one way to reduce size of text for smaller devices is to do something like this.

/* CSS */
.responsive-text {
  font-size: 1.5rem;
}

@media only screen and (max-width: 767px) {
  .responsive-text {
    font-size: 0.75rem;
  }
}

<!-- HTML -->

<p class="responsive-text">Hello World!</p>

Hope this helps. Enjoy!

[Author]

Posts