change font size (but NOT home page or sidebar)

Home › Support › Blog Way › change font size (but NOT home page or sidebar)

Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 27, 2020 at 10:56 pm #17269
    Anonymous
    Inactive

    I’d like to change the font size of my blog posts and pages, but not the sidebar, menu, or homepage. So far, I found this custom CSS to add in Customizing>Additional CSS:

    .body {
    font-size: 16px;
}

    However, this CSS increases the font size of the sidebar and home page. For now, I modified it to increase the font size of just blog posts, like this:

    .post {
    font-size: 16px;
}

    Can you tell me how to modify it further so the page font size is also increased, but not the homepage, sidebar, or menu? Thanks! (My website: http://www.katiesonger.com.)

    November 4, 2020 at 3:06 am #17328
    nirav
    Keymaster

    Hello There!

    Hope you are doing good!

    Please add custom CSS by following the below-mentioned step

    1) Please log in to the admin area
    2) Go to “Appearance >> Customize >> Additional CSS”.
    3) Paste the below code in “Additional CSS” and save it afterward:

    .main-navigation ul li a{font-size:11px;}
body.home{font-size:14px;}
.widget {font-size:14px;}
.widget .widget-title{font-size:16px;}

    Hope this helps!

    Have a great day ahead!

    Regards,
    Team ProDesigns

    November 17, 2020 at 12:47 am #17415
    Anonymous
    Inactive

    Thank you! But this doesn’t appear to increase the font size on the pages. Can you please send additional code that does that?

    December 4, 2020 at 10:01 am #17526
    nirav
    Keymaster

    Hello There!

    Hope you are doing good!

    Please update custom CSS as mentioned below

    .main-navigation ul li a{font-size:11px;}
body, button, input, select, textarea{font-size:16px;)
body.home{font-size:14px;}
.widget {font-size:14px;}
.widget .widget-title{font-size:16px;}

    Please adjust the font size as per the requirement.

    Regards,
    Team ProDesigns

    • This reply was modified 3 years, 4 months ago by nirav.
    December 7, 2020 at 8:24 pm #17543
    Anonymous
    Inactive

    Thank you! There is a small error in your code, but I fixed it: in the second set of brackets {}, you closed it with a parentheses ) instead of a bracket }. So the correct code, including the code I previously found for the post fonts, is:

    .post {font-size: 16px;}
.main-navigation ul li a{font-size:11px;}
body, button, input, select, textarea{font-size:16px;}
body.home{font-size:14px;}
.widget {font-size:14px;}
.widget .widget-title{font-size:16px;}

    This worked. Just to make sure I understand, and for future people looking at this thread, here’s my understanding of the CSS:

    .post = for blog posts
    .main-navigation = for the navigation menu
    body, button, input, select, textarea = for the pages
    body.home = for the home page
    .widget = for the widget text
    .widget-title = for the widget title text

    I have one last, related question: Ideally, it would be nice to shrink the font on just three of my pages–my three blog archive pages. They’re here:

    – http://www.katiesonger.com/health
    – http://www.katiesonger.com/politics
    – http://www.katiesonger.com/writing

    Can you tell me the code to do this too, if possible?
    Thanks,
    Katie

    December 12, 2020 at 12:55 pm #17586
    nirav
    Keymaster

    Hello There!

    Hope you are doing good!

    Please find the updated code to target only 3 pages.

    .post {font-size: 16px;}
.main-navigation ul li a{font-size:11px;}
body, button, input, select, textarea{font-size:16px;}
body.home{font-size:14px;}
body.category-health{font-size:14px;}
body.category-politics{font-size:14px;}
body.category-writing{font-size:14px;}
.widget {font-size:14px;}
.widget .widget-title{font-size:16px;}

    Hope this helps!

    Have a great day ahead!

    Regards,
    Team ProDesigns

    December 14, 2020 at 8:06 pm #17607
    Anonymous
    Inactive

    Thanks very much. That additional code doesn’t seem to change anything, though… Could that be because of the unique formatting of these three pages, where most of the text is inside of boxes that link to the blog posts? I’m hoping to reduce the font of the headings and subheadings of the blog posts, if possible.

    December 18, 2020 at 5:05 am #17623
    nirav
    Keymaster

    Hello There!

    Hope you are doing good!

    Add below custom CSS to make blog post title and subtitle font size small for only three categories mentioned above

    body.category-health .post .detail-wrap .entry-header h2.entry-title a,
body.category-politics .post .detail-wrap .entry-header h2.entry-title a,
body.category-writing .post .detail-wrap .entry-header h2.entry-title a{
    font-size: 16px;
}
body.category-health .post,
body.category-politics .post,
body.category-writing .post{
    font-size: 14px;
}

    Hope this helps!

    Have a great day ahead!

    Regards,
    Team ProDesigns

    December 18, 2020 at 6:18 pm #17626
    Anonymous
    Inactive

    Thank you very much! At last, this issue is completely resolved. I really appreciate your support; have a great day!

    December 25, 2020 at 9:03 am #17666
    nirav
    Keymaster

    Hello Katie,

    Hope you are doing good!

    We are glad that the issue got resolved.

    Have a great day ahead!

    Regards,
    Team ProDesigns

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.