Support » Theme: Twenty Twenty-One » Text header breaking in mobile view

  • Hi,

    I’d like to keep the “gigantic” size for the header from the original twenty twenty one theme for desktop but would like it to resize for mobile instead of breaking the words as seen by resizing the page or testing on my mobile phone.

    e with

    I’d like it to resize to mobile (and any other screen size) keeping the integrity of whole words, to look like:


    This looks really basic and I have read many posts on the forum that relate to image size but couldn’t find a solution to fix my issue.

    I’m new and don’t know how to do it. Cheers

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hello,

    You can accomplish this with a CSS media query. Is the text you want to change the page title, post title, the site title or a heading block?


    Thread Starter twowheelz


    Hey Oliver, it’s the heading block. Cheers

    No problem, try adding this to “Customizer – Additional CSS” …

    @media only screen and (max-width: 481px) {
    h2 {
    font-size: 1rem;

    … changing the h2 to your preferred heading size and 1rem to your preferred font size. 481px is the theme’s default breakpoint for mobile.


Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Text header breaking in mobile view’ is closed to new replies.