change font size (but NOT home page or sidebar)

Tagged: font, font size

This topic contains 28 replies, has 20 voices, and was last updated by Anonymous 2 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 29 total)

1 2 →

Author

Posts
October 27, 2020 at 10:56 pm #17269
Anonymous
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
ProDesign Support
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

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
ProDesign Support
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 1 year, 8 months ago by ProDesign Support.
December 7, 2020 at 8:24 pm #17543
Anonymous
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
ProDesign Support
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

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
ProDesign Support
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

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

ProDesign Support
Keymaster

Hello Katie,

Hope you are doing good!

We are glad that the issue got resolved.

Have a great day ahead!

Regards,
Team ProDesigns

June 9, 2021 at 5:42 am #19509

Anonymous

I had the same problem on my website https://pescobill.pk/ from last 2 months, Finally found this post. Thanks you so much <3

November 15, 2021 at 3:36 pm #21596

Anonymous

i have made new website https://www.pescobill.net/ need some help to make it better

December 11, 2021 at 8:58 pm #22075

Anonymous

This information is magnificent. I understand and respect your clear-cut points. I am impressed with your writing style and how well you express your thoughts. https://priorbeauty.com/best-loose-powder-for-mature-skin-a-buyers-guide/

December 15, 2021 at 4:34 pm #22151

Anonymous

Hello nice post for beginers I also made new site checkout the fonts
https://www.fescobills.com/
https://www.suigasbill.net/

December 26, 2021 at 7:29 pm #22321

Anonymous

I had the same problem on my website https://serialkeyforfree.com/ from last 1 months,
Author

Posts