Font sizes are different on post and menu

  • Resolved kufloyd

    (@kufloyd)


    3 years, 10 months ago

    Hi,

    I’ve created a post here with a category of ‘writing’: https://kunalmehra.com/the-great-conjunctions/

    I added the ‘writing’ category to the navigation menu, by going to Appearance –> Categories.

    When I go to the ‘writing’ menu, that post shows up here: https://kunalmehra.com/category/writing/

    However, the fonts are different in the 2 URLs. The font on the actual post (1st URL) is bigger (I edited font size by using a plugin that was installed for the Twenty Twenty One theme). How do I make sure the font size is the same across the website, both for the actual posts and also when they show up in the menu/category?

    Thanks.

    • This topic was modified 3 years, 10 months ago by t-p. Reason: Moved to Fixing WordPress from Everything else WordPress

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    3 years, 10 months ago

    Well, each page’s main titles are consistent. The post’s title on the category archive page is a secondary title, hence it’s smaller on purpose. If you want the post’s title here to be different size, you can apply custom CSS by adding something like this to the Additional CSS customizer section:

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

    This will make the post title as large as it is on the singular post page. You can change the size value to anything else you might like, for example:
    font-size: 36px;

    This will affect all post entry titles across the site. You can have the rule only affect the writing category with selectors like this:
    .category-writing .entry-title

    Thread Starter kufloyd

    (@kufloyd)

    3 years, 10 months ago

    Thanks for the reply.

    Do you know, on the category page (https://kunalmehra.com/category/writing/), how to change the font size for the actual text (not just the title)?

    Like I want this to be bigger: “What happens when two strangers meet unexpectedly on a beach on a quiet winter night during the pandemic? They each have their own reasons for being there. What follows is a story of how the night is transformed for each of them.”

    Is there CSS code for that or perhaps a better way to do it?

    Thanks.

    Moderator bcworkz

    (@bcworkz)

    3 years, 10 months ago

    Something like this in Additional CSS section of the customizer:

    .category-writing .entry-content p {
    font-size: 24px;
    line-height: 1.5;
}

    Change the size values as desired. This is just for the writing category archive. If you want this on all category archives, use .category instead of .category-writing

    ETA: You can use your browser’s element inspector tool to more quickly decide what the best sizes are. Changes in the tool do not persist, edit the rules in Additional CSS for persistence. If you really learn to use the tool, you could come up with your own CSS 🙂 But we’re happy to help you here as well.

    • This reply was modified 3 years, 10 months ago by bcworkz.
    Thread Starter kufloyd

    (@kufloyd)

    3 years, 10 months ago

    Thanks again. That fixed the issue.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Font sizes are different on post and menu’ is closed to new replies.