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

  • 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 4 replies - 1 through 4 (of 4 total)
  • bduclos

    (@bduclos)

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

    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.

    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.

    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;
    }

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