Jump to content

Don't succeed in adding padding to social icons

Recommended Posts



On my website (www.janpeeters.nl/welcome) I have at the bottom a row of social icons. I've been trying for an hour now to add more space in between the icons. I've tried adding padding to .icons, to individual icon classes etc etc. I've used Firebug to research it but whatever I try nothing changes. I thought maybe I have custom code that overrules it but deleting various customised classes doesn't give any difference.

So hopefully someone can help me out with how I can add padding in between the icons. Thanks and sorry for asking.


Share this post

Link to post
Share on other sites

Hi Catrina,

#morefoot .icons {

position: absolute;

float: right;

height: 20px;

padding-right: 7px;

padding-left: 6px;


And the code I use to get the height of the morefooter as small as possible is the following:

.section-morefoot .content-pad,

.section-morefoot .widget-pad {

padding: 0px;

padding-left: 15px;


Hope this gives some more info.

Thanks, Jan

Share this post

Link to post
Share on other sites

Jan, I found that if you do this....

img {

    border: 0 none;

    height: auto;

    margin-left: 10px;

    margin-right: 10px;

    vertical-align: middle;


It adds 10px of margin space to each side. However, it does this for every image, site-wide.

Perhaps if you added #morefoot at the beginning. I just can't be sure.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Rob, thanks a lot. It gave me the tools to solve it. Jan

#morefoot img {

border: 0 none;

height: auto;

margin-left: 2px;

margin-right: 2px;

vertical-align: middle;


Share this post

Link to post
Share on other sites

The topic was marked as resolved.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • MissT
      By MissT+
      The social icons within the Sitemap Footer section plugin are not longer showing on screen. Site details will be sent via email separately.
      WordPress - 4.7.2
      Pagelines Framework Version 5.0.97
      Platform 5 Version - 5.1.6
      Section Sitemap Footer version - 5.0.4.
      All other plugins deactivated.
    • jeomiland
      By jeomiland+
      In post 34871-sharebar-issues Danny suggests one can use any of the icons in font-awsome for social share icons. What's the best way to use other images?  Client asked me to implement the icons at http://www.wpbeginner.com/showcase/16-best-free-social-media-icon-sets-for-wordpress/  specifically #20 "20 Social Media Icons". Have downloaded the zip file containing those icons but where/how get them to show up on the site?
      So I am referring to both the icons to send visitors to the site owner social properties AND shar icons so people can Like, share ect.
      Upon further research, I see a discussion on problems with using social icons on SSL (https://...) sites since a warning message comes up complaining about mixed SSL and non-SSL content on the page? Since this site is a shoppingcart site, using Woocommerce, this could be a problem. What's the current wisdom on dealing with this?  Also, I read a while ago there can be a performance hit if one makes their whole site SSL, so since Wordpress and themes adds significant overhead, what's the current wisdom on this issue?  SSL for all pages or just for shoppingcart checkout/account info pages?
      site: http://verdanthomeproducts.com
    • pieterbartlema
      By pieterbartlema
      Dear All,
      Somehow the the social icons went missing in the site branding section. please help...
    • abuzzelli
      By abuzzelli+
      Trying to display social icons in the footer of http://brkichdesign.com/NewSite/. All are working but yelp. It's right after the pinterest icon, it's there but not showing up. Any ideas why?
    • lutz
      By lutz
      I'm using Pagelines for some years now and had to change to responsive webdesign recently (Site Options - Layout Editor - Layout Handling: "responsive with % width" now instead of the former "static with pixel width").
      In "Site Options - Header and Footer" - Branding Section: Social Icon Position" I set the distance from bottom to 35 and the distance from right to 1135 as it always has been.
      Now the problem is that the social icons move with the width of the browser (IE, Chrome, Opera, Firefox: all the same) and thus out of the window if the frame is too small. Please try out on http://mobiwatch.de
      I can't position social icons on the right side of the website because there are two sidebars with ads.
      And I can't change back to static pixel width design because of Google: they will ignore websites that do not have responsive web design!
      So I really, really hope you can help me fix that!!!
      Thanks in advance,