Responsive font size for header

  • Resolved lucipurr

    (@lucipurr)


    1 year, 8 months ago

    Hello, I’m using the twenty twenty-two theme and it’s default page builder to build my website. I set up a large header text and it looks great on desktop, but it looks terrible on the phone.

    Is it possible to change header text to be responsive based on the device’s size? And if that’s possible, how can I do it?

    I also wondered if it’s possible to have font sizes be responsive to their containers. For instance here https://writing.nyaacloud.net/smoky-skylines/ I have word count, categories, etc in columns and rows. It looks good on desktop, but if I make the page narrow like it would look on mobile, “Categories:” ends up breaking onto two lines, and I’d like instead for the text to just get smaller.

    Thank you!

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

Viewing 1 replies (of 1 total)
  • Moderator Kathryn Presner

    (@zoonini)

    @lucipurr – I understand what you’re aiming for! There isn’t currently a built-in way to set specific font sizes for various screen sizes.

    I can make two suggestions, however:

    • You might like to experiment with Twenty Twenty-Three. This theme uses a technique called fluid typography, which defines a size range for text within various screen sizes, to better adjust the display to each device, on the fly. Learn more here.
    • Alternatively, you can add custom CSS to specify your own font sizes targetting different screen sizes. While the Customizer is not exposed by default when using Site Editing, you can still access it manually by adding /wp-admin/customize.php after your URL. You can then add custom CSS in the Additional CSS area. If you prefer to go this route and need help writing the CSS, let me know.
Viewing 1 replies (of 1 total)
  • The topic ‘Responsive font size for header’ is closed to new replies.