Social Media Widget, how to change font size and increase size of Facebook logo

lindawareham · Member · Oct 11, 2015 at 4:15 pm
Copy link

Add topic to favorites
Hi, I have recently added the social media widget to the sidebar of my website I am working on. If you go to the about page for example you can see on the right hand side ‘Follow us on’ text at the moment it is too big, how do I reduce the size of this? As in have it all on one line.

Secondly, how can I make the Facebook icon/logo bigger? Which is below the follow us on text. As it is a bit small. I want to make the overall appearance of the widget look neater. Perhaps making the text and logo similar size in proportion.

Thanks and look forward to hearing from you all.

The blog I need help with is: (visible only to logged in users)
lindawareham · Member · Oct 11, 2015 at 4:17 pm
Copy link
Hi, I have recently added the social media widget to the sidebar of my website I am working on. If you go to the about page for example you can see on the right hand side ‘Follow us on’ text at the moment it is too big, how do I reduce the size of this? As in have it all on one line.

Secondly, how can I make the Facebook icon/logo bigger? Which is below the follow us on text. As it is a bit small. I want to make the overall appearance of the widget look neater. Perhaps making the text and logo similar size in proportion.

Thanks and look forward to hearing from you all.

The blog I need help with is lindawareham.wordpress.com.
ehtis · Staff · Oct 11, 2015 at 8:57 pm
Copy link
Hey Linda,

Good catch there! And you’re right, the text size was indeed quite big.

Here’s the code which should fix both, i.e., text size and Facebook logo:
```
/* This value targets text size */
.widget-area h2 {
    font-size: 14px;
}

/* This font-size targets Facebook icon */
.widget-area .genericon {
    font-size: 22px;
}
```
You can adjust the font-size values as per liking! :)
lindawareham · Member · Oct 15, 2015 at 12:26 pm
Copy link
Hi Ehtis,

Thank you for your response and advice was very helpful indeed! I now want to move the social media widget to the footer next to the text that says ‘ Images and content copyright Linda Ting Wareham’ how I do this and keep the follow us on and facebook icon the size it is now at? As I tried to do this in appearance – widgets to footer 2 but the size of follow us on and facebook icon went back to the original which was too big? Thanks for your help and look forward to hearing from you.

Linda
ehtis · Staff · Oct 16, 2015 at 5:47 am
Copy link
Linda,

Yes, the size would go back to original if you add it to the footer wdigets, but we can adjust its size again once it’s sitting in the footer area.

This will require a small change in code. The best approach here is to first add the Facebook icon to the footer widgets from Appearance > Widgets, and then I can get its new code for you.
lindawareham · Member · Oct 16, 2015 at 10:12 am
Copy link
Hi Ehtis,

I have now added it to the footer area for widgets. Thanks and look forward to hearing from you re the new code for it to adjust sizing.

Kind regards,
Linda
ehtis · Staff · Oct 16, 2015 at 1:28 pm
Copy link
This would do it:
```
.genericon {
    font-size: 32px;
}
```
I made the selector above a bit less specific, so it should work whether you add it to sidebar or footer.
lindawareham · Member · Oct 21, 2015 at 12:54 pm
Copy link
Hi Ehtis,

Thank you for your response. The code you gave me does work to adjust the size of the facebook icon which is great in the footer area. But I also need the code to adjust the size of the ‘follow us on’ text because at the moment its too big. Thanks for your help.

Linda
ehtis · Staff · Oct 22, 2015 at 3:52 am
Copy link
This should fix widget title sizes in footer area, which includes the “follow us” widget:
```
.footer-widgets .widget-title {
    font-size: 15px;
}
```
lindawareham · Member · Oct 25, 2015 at 10:04 pm
Copy link
Hi Ehtis,

Thanks for the fix re the widget. I was wondering do you know if it is possible to put an image in the footer? I want to put one in the right hand corner. Thanks for your help.

Linda

No items found.