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

  • 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 11 months, 4 weeks ago by diopants.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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 11 months, 4 weeks ago by diopants.
    • This reply was modified 11 months, 4 weeks ago by diopants.

    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 11 months, 4 weeks ago by diopants.

    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

    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

    @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

    @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 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Can not change Page Title Font (has gigantic-font-size)’ is closed to new replies.