Contact footer widget font size

Good morning

I have increased the body font size and this seems to be what controls the footer widget contact information font.

The increase in size in font in the footer has distorted the contact icons.

Is there a way to change only the contact footer widget font size please?

Many thanks


Sure, you can change the contact widget font size using this:

.moesia_contact_info_widget {
    font-size: 16px;

Hi Vlad - didn’t think it would take you long to respond!

I have added the code, but it does not appear to have impacted - just to be clear it is the footer contact widget I would like to fix.

I have also noted that the same thing has happened on my contact page, using the Moesia: contact info widget, again the icons have been distorted when I use a 20 size font, but I don’t want to reduce the font size here if I can avoid it.

Any thoughts on how I could retain the font size but not have the distorted icons?

Apologies if this is a stupid question.

Post a link to your website please, perhaps I’m not understand properly.

Using some of your previous help I have used your code and added !important and this seems to work

.moesia_contact_info_widget {
font-size: 14px !important;

Not sure why it is important to add important!??

So you can overwrite the body font size. Sorry, forgot to mention.

OK - thanks

I think that I am begging to understand - so !important means ‘override’ the template settings?

I am also encountering a similar problem using the ‘Moesia contact info’ widget in the body of a page - need to reduce the body text to 16 or less to stop the icons being impacted.

Is there a slightly different code to amend just this text and not the rest of the body text?

!important means that the rule you add it to will take precedence over other rules that have a higher priority, which is the case here considering that the rule you’re trying to override is added dynamically. So it’s not always need it, but it is in this case.
Here’s an example:

.x {
   color: #fff !important;
.x {
   color: #000;

Normally (without !important) .x will be #000 because you’ve set it after #fff. But because the first rule has !important, it will be #fff.

Now regarding your question, I’ll need to see the page you’re referring to. Please note for the future that I, or any other theme/plugin developer, might not have the same test environment as yours so it’s hard to help without seeing.

Thanks Vlad - thats really helpful. Hopefully I am learning as I go, which should diminish my questions in the future!

I totally understand that it is difficult to visualize the problem I am encountering, but I don’t want to publish the URL of the site I am working on in the public arena at the moment.

Thanks again for all of your help.

You can always send me the link via email at vlad[at] if that helps.