Support » Theme: Twenty Twenty-One » Twentytwentyone Change Pullquote font size

  • ob1tanobey

    (@ob1tanobey)


    Hello smart people. I have been searching and I can’t find the answers so I had to create this post. I have two questions.
    1) What is the code to change the pullquote’s font size on the twentytwentyone theme?
    I got this css from a post from Kinsta.com and that’s how I changed the headings’ font sizes… But it was limited to only changing the font styles and sizes.
    2) Is there a site where I can get the codes for changing anything else on a twentytwentyone theme?
    These are the additional css that I am using at the moment:
    :root {
    –global–font-size-page-title: 30px;
    –heading–font-size-h1: 30px;
    –heading–font-size-h2: 28px;
    –heading–font-size-h3: 26px;
    –heading–font-size-h4: 24px;
    –heading–font-size-h5: 22px;
    –global–font-size-base: 19px;
    }

    Thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)
  • bduclos

    (@bduclos)

    This is the CSS to change the pullquote font-size.
    :root {--pullquote--font-size:40px;}

    Thread Starter ob1tanobey

    (@ob1tanobey)

    Hi @bduclos, sorry but that didn’t do it. I added the whole code in the additional css but didn’t do the trick. thanks for your time.

    Oliver Campion

    (@domainsupport)

    That CSS is correct, so it’s likely that something in your “Customizer – Additional CSS” is breaking the CSS.

    What I would say though is that using CSS variables is not compatible with older browsers so to be on the safe side you should use …

    .wp-block-pullquote.is-style-solid-color blockquote p {
    	font-size: 4rem;
    }

    … to change the font size of the title and …

    .wp-block-pullquote .wp-block-pullquote__citation, .wp-block-pullquote cite, .wp-block-pullquote footer {
    	font-size: 2rem;
    }

    … to change the font size of the citation in the pullquotes.

    Take a look at Options for Twenty Twenty-One plugin which has lots of additional modifications.

    Thread Starter ob1tanobey

    (@ob1tanobey)

    Hi @bduclos thanks for your replies but I am not having any luck. The following is what I have in my “Additional CSS.” I don’t know what’s causing the problem. I do have a child theme if that helps. Thanks anyways.

    :root {
    –global–font-size-page-title: 30px;
    –heading–font-size-h1: 30px;
    –heading–font-size-h2: 28px;
    –heading–font-size-h3: 26px;
    –heading–font-size-h4: 24px;
    –heading–font-size-h5: 22px;
    –global–font-size-base: 19px;
    }
    a:link {
    color: #008000;
    }

    a:hover {
    color: #000000;
    }
    :root {–pullquote–font-size:10px;}

    .wp-block-pullquote .wp-block-pullquote__citation, .wp-block-pullquote cite, .wp-block-pullquote footer {
    font-size: 1rem;
    }
    .wp-block-pullquote.is-style-solid-color blockquote p {
    font-size: 1rem;
    }

    Hi @ob1tanobey,

    I had the same problem that the heading-font-size didn’t change even though the CSS code was correct.

    I tried around for a long time until I was exasperated and wanted to give up. I then asked God:”Can you help me?” A short time later I saw in “Custom CSS” that a character (“}”) was present twice. I then removed them and editing the heading-font-size worked again.

    So it’s best to check the “Custom CSS” to see whether a character is out of place or code has been misspelled.

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