Avada › Forums › Community Forum › Title doesn't fit in small screens (smartphone)
Tagged: css, responsive, Title, media query, small screen, word-break
-
AuthorPosts
-
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 🙂
NicolasHi,
To break up your long word, you can set a
word-break
CSS property to something likebreak-all
orbreak-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!
-
AuthorPosts
- You must be logged in to reply to this topic.