Home Forums Community Forum Title doesn't fit in small screens (smartphone)

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • NicolasBaldi07
    Participant
    Post count: 2

    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
    Participant
    Post count: 404

    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!

Viewing 2 posts - 1 through 2 (of 2 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.