font size change CSS code – Gateway

  • Unknown's avatar
    navidsamedi · Member ·

    Hey there,
    I was wondering if you could help me with the CSS code necessary for;
    1. Changing the font size ( e.g increase the size by 20%) of a particular paragraph on a post/page?
    2. Changing the font size of an entire body of text on a post/page?

    I’m having difficulty finding the right CSS selector for this job.
    Thanks in advance

    The blog I need help with is: (visible only to logged in users)

  • melindahelt · Staff ·

    Hi

    Are you looking to change the fonts just in a very specific place (one or two pages or posts) or increase the font size on your entire site?

    If you want to just edit a small bit of text on one or two pages or posts for emphasis, you can use in-line CSS to make those edits.

    For this, you’ll want to go into the text editor tab in your inspector and use code like this. You can change the font size number to anything you wish.

    <span style="font-size:50px !important;">This is the paragraph that you'd like to increase the size of</span>

    You can also use the same tags and the start and end of the page if you only want to edit one page.

    But, if you want to make the edits site wide, you’ll need to have the premium or business level plan and you’ll need access to the custom CSS editor. You can read about that at https://en.support.wordpress.com/custom-design/editing-css/.

    If you do have access, here’s the code you’ll need to use to increase the body text size on your site:

    p {
    font-size: 120%;
}

    The paragraph tag gets it’s font sizing from the body tag, which is set at at 1.6 rem. If you set the font at 100%, it will be the same at 1.6 rem. As you go above 100%, it will enlarge it and as you go below 100%, it will reduce it.

    Hope this helps! Let me know if you have any additional questions.

  • Unknown's avatar
    navidsamedi · Member ·

    Perfect. Thanks so much.

    Just one more question; how can I align the left border of the body texts in my page/posts with the menu. As in have the word ‘Home’ from my menu be aligned vertically with the left border of a post’s title and paragraphs? Does that make sense.
    (p.s I have the premium plan so the CSS coding shouldn’t be a problem)
    my blog: https://searchingforelsewhere.com/

    Thanks in advance

  • melindahelt · Staff ·

    While it is possible to change the spacing on the paragraph block to align with the navigation menu, that can get a little tricky when it comes to responsive sizes sometimes.

    I’d suggest that you change the alignment of the menu instead and see what you think about that.

    Add this code to your custom CSS and see what you think.

    @media screen and (min-width: 35em)
.main-navigation {
    text-align: left;
}
  • The topic ‘font size change CSS code – Gateway’ is closed to new replies.