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

Text header breaking in mobile view

  • twowheelz

    (@twowheelz)


    1 month, 3 weeks ago

    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.

    https://imgur.com/a/vDRaiGe

    Currently:
    Websit
    e with
    blocks

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

    Website
    with
    blocks

    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)
  • Oliver Campion

    (@domainsupport)

    1 month, 3 weeks ago

    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?

    Oliver

    Thread Starter twowheelz

    (@twowheelz)

    1 month, 3 weeks ago

    Hey Oliver, it’s the heading block. Cheers

    Oliver Campion

    (@domainsupport)

    1 month, 3 weeks ago

    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.

    Oliver

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Views