[Solved] Widgets font-size issue  


vasan
Posts: 7
(@vasan)
Active Member
Joined: 3 weeks ago

@astghik

Hello! I also have this same problem, but the CSS code has not solved in my case.

Here's a link from where my Widget is: https://www.minhaoperadora.com.br/

11 Replies
11 Replies
Elvina
Moderator
(@elvina)
Joined: 3 months ago

Estimable Member
Posts: 181

@vasan,

The issue will be solved if you put the following CSS code in the "Widget custom CSS" textarea: 

#widget-comments-container .wpdiscuz-widget-popular-comment-author .popular-comment-author-body {
width: 100%;
}

#widget-comments-container.widget-comments-container .popular-comment-author-body{
font-size: 12px !important;
white-space: normal;
width: 80% !important;
}
.fa-reply:before {
content: "\f3e5" !important;
}

There is another CSS conflict. Above is providing CSS code that will solve that conflict as well. 

wp widget

Please don't forget to delete all caches and press CTRL+F5 (twice) on the frontend before checking.

You'll need to clean Autoptimize plugin caches. More info on how to delete the Autoptimize plugin caches you'll find here, just scroll down a bit. 

vasan
(@vasan)
Joined: 3 weeks ago

Active Member
Posts: 7

@elvina Hi Elvina! This CSS code did not solve my problem completely. Although the last comments section is no longer cropped, the font style of this section is different from the others. The font size of the last comments is too small.

About the other CSS conflict, where the "Discussões Mais Ativas do Mês" icon does not appear, it still does not appear.

Elvina
Moderator
(@elvina)
Joined: 3 months ago

Estimable Member
Posts: 181

@vasan,

Bellow provided the code that will solve this conflict:

#widget-comments-container #wpdiscuz-recent-comments-box .wpdwd-recent-comment-content>a{
font-size: inherit !important;
}

About the other CSS conflict, where the "Discussões Mais Ativas do Mês" icon does not appear, it still does not appear.

For some reason, the code added by you has extra characters. Please see the screenshot below:

icon style

 

Please check the code added in the "Custom CSS code" textarea, and make sure it's  correct (without extra characters):

.fa-reply:before {
   content: "\f3e5" !important;
}

Don't forget to delete all caches and press CTRL+F5 (twice) on the frontend before checking.

vasan
(@vasan)
Joined: 3 weeks ago

Active Member
Posts: 7

@elvina

Hi Elvina I put the codes exactly as you informed me, and unfortunately the problem is still occurring. Here is the code I added to the custom CSS field:

#widget-comments-container .wpdiscuz-widget-popular-comment-author .popular-comment-author-body {
width: 100%;
}

#widget-comments-container.widget-comments-container .popular-comment-author-body{
font-size: 12px !important;
white-space: normal;
width: 80% !important;
}
.fa-reply:before {
content: "\f3e5" !important;
}

vasan
(@vasan)
Joined: 3 weeks ago

Active Member
Posts: 7

@elvina

I noticed that the CSS field is automatically adding unwanted additional characters. It's out of my control.

Elvina
Moderator
(@elvina)
Joined: 3 months ago

Estimable Member
Posts: 181

@vasan,

Please put the CSS code in Top Black Admin Bar > Customize > Additional CSS, delete all caches and press Ctrl+F5 (twice) on that page. It should work fine.

.fa-reply:before {
content: "\f3e5" !important;
}

The issue comes from the Widgets addon It'll be fixed in the next update.

Don't forget to remove the code form "Widget custom CSS"  textarea.

vasan
(@vasan)
Joined: 3 weeks ago

Active Member
Posts: 7

@elvina

Now yes! Unfortunately, however, another problem arose: in the "Discussões Mais Ativas do Mês" field, the same as the problem with the icons, the title of the commented article no longer appears. Now only the comment is displayed alone.

About the font size, I would really like to increase it, especially from the "Last Comments" section. It's all very small and hard to read.

Thanks for the help.

Elvina
Moderator
(@elvina)
Joined: 3 months ago

Estimable Member
Posts: 181

@vasan,

 Unfortunately, however, another problem arose: in the "Discussões Mais Ativas do Mês" field, the same as the problem with the icons, the title of the commented article no longer appears.

I'm sorry, but this is designed to work in this way. There where never the title of the commented article on that tab (Active Comment Thread).

About the font size, I would really like to increase it, especially from the "Last Comments" section. It's all very small and hard to read.

The CSS code provided in this post should solve the issue. It seems you've not added that code or there is some cache issue. I. e. you should delete the caches before checking.

The CSS code you should use: 

#widget-comments-container #wpdiscuz-recent-comments-box .wpdwd-recent-comment-content>a{
   font-size: inherit !important;
}
vasan
(@vasan)
Joined: 3 weeks ago

Active Member
Posts: 7

@elvina

Perfect. The source for the "Last Comments" section is now 16, just the way I want it. Thank you for your help. Finally, what do I need to do to increase the font size of the other sections? I want to leave everything standardized!

Elvina
Moderator
(@elvina)
Joined: 3 months ago

Estimable Member
Posts: 181

@vasan,

Please use this code:

#widget-comments-container.widget-comments-container div.wpdiscuz-widget-comment-exc, #widget-comments-container .wpdiscuz-widget-comment .wpdiscuz-widget-comment-content p.wpdiscuz-widget-comment-title,#widget-comments-container.widget-comments-container .popular-comment-author-disp-name .commenter-name-box{
font-size: 16px !important;
}
vasan
(@vasan)
Joined: 3 weeks ago

Active Member
Posts: 7

@elvina

It worked! Thanks a lot for the help. Hugs

Share:
Green
Default
Pear
Black Emo
{green}:grinning:
{green}:wink:
{green}:face:
{green}:inlove:
{green}:sweaty:
{green}:surprised:
{green}:lovekiss:
{green}:laugh:
{green}:formalsmile:
{green}:displeased:
{green}:cool:
{green}:resent:
{green}:nerd:
{green}:screaming:
{green}:amazed:
{green}:sad:
{green}:deceitful:
{green}:starryeyes:
{green}:evil:
{green}:shocked:
{green}:tears:
{green}:sulky:
{green}:smile:
{green}:vomited:
{green}:hi:
{green}:afraid:
{green}:crazy:
{green}:rabid:
{green}:fighting:
{green}:nonoise:
{green}:blushed:
{green}:idontknow:
{green}:scared:
{green}:razz:
{green}:kiss:
{green}:eat:
{green}:shutmouth:
{green}:gape:
{green}:suspicious:
{green}:laughingoutloud:
{green}:bruise:
{green}:crying:
{green}:pray:
{green}:serious:
{green}:excitement:
:)
:d
:wink:
:mrgreen:
:neutral:
:twisted:
:arrow:
:shock:
:???:
:cool:
:evil:
:oops:
:razz:
:roll:
:cry:
:eek:
:lol:
:mad:
:sad:
:!:
:?:
:idea:
:hmm:
:beg:
:whew:
:chuckle:
:silly:
:envy:
:shutmouth:
{pear}:happy:
{pear}:smile:
{pear}:laugh:
{pear}:laughingoutloud:
{pear}:crying:
{pear}:exhausted:
{pear}:nerd:
{pear}:surprised:
{pear}:veryhungry:
{pear}:wink:
{blackemo}:laughtertotears:
{blackemo}:gift:
{blackemo}:love:
{blackemo}:inlove:
{blackemo}:shamefaced:
{blackemo}:heart:
{blackemo}:crazy:
{blackemo}:anguished:
{blackemo}:bruise:
{blackemo}:easymoney:
{blackemo}:exhausted:
{blackemo}:vampire:
{blackemo}:shutmouth:
{blackemo}:wink:
{blackemo}:carnival:
{blackemo}:flowers:
{blackemo}:hotdrink:
{blackemo}:party: