Support » Theme: Twenty Twenty-One » Can not change Page Title Font (has gigantic-font-size)

  • diopants

    (@diopants)


    Hi –
    I have tried using a couple of different plugins and even manualy edited the stlye.css and the style.css and style-rtl.css files to vary the font sizes.

    No mater what I do, I can not change the page header font height.

    Plugins: Twentig & Options for Twenty Twenty-One. Twentig seems pointless and does not show me much.,

    I tried using the Customize theme option, which I think is coming from Options … plugin, but I can NOT change the page title at all. No matter what I do, using any of the sliders has no effect.

    PAge view and inspecting the element-
    https://i.imgur.com/P555Ack.png

    Trying to change the page title size-
    https://i.imgur.com/SbWABas.jpg

    Maunally looking at the style.css page
    https://i.imgur.com/XhxSBUv.png

    • This topic was modified 1 month ago by diopants.

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Oliver Campion

    (@domainsupport)

    Hello,

    Using Option for Twenty Twenty-One plugin, we have setup a test site and can confirm that the “Customizer – Content Options – Page Title Font Size” definitely works as described.

    Looking at the HTML on your screen grab, what you are trying to change is not the page title.

    The page title is not shown on the home page on this theme.

    What you are trying to change is a Heading block in the editor. In order to change the font size for this, please edit the page, click on the Heading block, on the right under Block settings, change the “Typography – Font Size” to your desired size.

    Oliver

    Thread Starter diopants

    (@diopants)

    Thanks for the reply, it solves half my problem though. This block does not seem to be a block on subsequent pages. See the Test page snip below.

    url here: https://www.euclidprobe.com/test/

    This issue exists on ALL my pages. If I start a ‘new page’ the font used in this block is gigantic.

    How do I set this globally so it defaults to a smaller font?

    https://i.imgur.com/JgYjL1i.png

    • This reply was modified 1 month ago by diopants.
    • This reply was modified 1 month ago by diopants.
    Oliver Campion

    (@domainsupport)

    On the “Test” page you mention, the size of the title there is dictated by the “Customizer – Content Options – Page Title Font Size” because on all pages except the home page the title of the page is shown in the page header (on this theme).

    Currently the “Customizer – Content Options – Page Title Font Size” option is not reflected in the size of the font in the editor when editing a page.

    Oliver

    Thread Starter diopants

    (@diopants)

    Oliver-

    I thought I tried that. I tried to show it in this picture-
    https://i.imgur.com/SbWABas.jpg

    There is NO effect by changing the slider for Page Title Font Size or Title Font Weight when using the customizer.

    OR

    Are you saying that this slider has no effect on the text field I am looking at on the ‘Home Page’ because it is not Page Title ?

    EDIT: Where am I able to adjust the sizes for the rest of the font height assignments? Do I do it manually in the style.css or is it burried somewhere else?

    • This reply was modified 1 month ago by diopants.
    Oliver Campion

    (@domainsupport)

    OK …

    • The home page does not show a page title with the Twenty Twenty-One theme
    • All other pages do show the page title
    • Your home page has a header block so you can edit that font size in the header block settings when editing the page
    • All other pages, when using Options for Twenty Twenty-One plugin, you can choose the page title font size by going to “Customizer – Content Options – Page Title Font Size”

    Please explain what you mean by “the sizes for the rest of the font height assignments”. Are you talking about other blocks or other elements of text? Please be specific.

    Thank you,

    Oliver

    artistnapa

    (@artistnapa)

    I am having good results using Options for Twenty Twenty-One to make the Twenty Twenty-One Page Titles a more resonable size. However, I have just noticed a “fly in the ointment” It has no effect on my Blog page Title, and since my Blog is not my home page, it’s just a regular page for my site, the blog Title is HUGE. Am I missing an option somewhere? Nunziata.com

    Oliver Campion

    (@domainsupport)

    Well spotted! We’ve taken a look and can replicate this issue. Looks like the Blog page uses a different class for page titles than other pages!

    We’ll get that sorted in the next update of the plugin. In the meantime, add this to your “Customizer – Additional CSS” …

    .page-title {
    font-size: 2rem;
    }

    Oliver

    artistnapa

    (@artistnapa)

    Wow! Thanks for the quick response. I’ll try that, although I suspect there is a css more like .blog-title. I doubt .page-title would have any effect.

    Thread Starter diopants

    (@diopants)

    Oliver-

    Thanks for your patience.

    The other parts I am trying to adjust are the sizes of the Header assignments. H1, H2, H3, …

    I can not find any Customizer Option to adjust the font height or weight globally.

    Do we edit those manually in the style.css ? Somewhere else?

    thanks in advance.
    dp

    Oliver Campion

    (@domainsupport)

    @artistnapa This is the CSS that is currently setting the size of the title on your own Blog page …

    .page-title {
    font-size: var(--global--font-size-page-title);
    }

    … so the CSS I gave before will definitely override that. If you want to target specifically the Blog page only then you could use this …

    .blog .page-title {
    font-size: 2rem;
    }

    … but your post suggested that you wanted all page titles to be included.

    Oliver

    Oliver Campion

    (@domainsupport)

    @diopants The generic font height and weight of H1 / H2 / … tags are set by the theme in the style.css as follows …

    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: var(--heading--font-weight);
    }
    h1, .h1 {
    font-size: var(--heading--font-size-h1);
    }
    h2, .h2 {
    font-size: var(--heading--font-size-h2);
    }

    So you can use, for example, this CSS to override the h2 styles on the front end …

    h2, .h2 {
    font-weight: bold;
    font-size: 2rem;
    }

    … or …

    :root {
    --heading--font-weight: bold;
    --heading--font-size-h2: 2rem;
    }

    … if you wanted to continue to use the CSS variables (which are not compatible with older browsers).

    But … you should note that this will not change the size of the elements in the editor. At the moment, in order to do that you would need to modify the style-editor.css theme file … which you should do using a child theme if you absolutely feel that you must.

    Oliver

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