Site5

Menu

Support Forums

problem with heights of social icons

Home Forums Shortnotes problem with heights of social icons

Tagged: 

This topic contains 20 replies, has 8 voices, and was last updated by  chanyuan 3 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
  • #5403

    gbacca
    Member

    Hi,

    I’ve tried to use WP plugins to social sharing, as addThis and ShareThis.Whis both of them I’ve got the same problem: the big icons as Facebook, etc. are showed fine at the end of posts, but the small icons as Google+ and “I like” (that has a litle tags showing the sharing score) are showed just with half height.

    I also tested Socialize plugin, and I found the same problem.

    Please, could you confirm me that, as I suspect, this is a problem with this WP theme? And in this case, could you tell me how to fix it?

    Thank you.

    #5434

    MaktubBruno
    Participant

    You can fix this with CSS.

    #5437

    bsahin
    Keymaster

    Hey I will test theme with these plugins and let you know the results and soultion.

    #5505

    gbacca
    Member

    Thank you bulent.sahin.

    #5554

    gbacca
    Member

    Did you find a solution to this problem?

    #5848

    gbacca
    Member

    eooo šŸ™‚

    #5927

    bsahin
    Keymaster

    Hey sorry for delay but you can find the solution below for ShareThis plugin:

    open the style.css of Shortnotes and add this lines over the commented line “Media Queries” on line 1191 and paste this:

     

    .st_plusone_buttons iframe, .st_fblike_buttons iframe, .addthis_toolbox iframe, .socialize-in-content iframeĀ  {
    padding:0px !important;
    background: none;
    border: none;
    box-shadow: none;
    }

    .stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices, .stButton .stButton_gradient {
    height:auto !important;
    }

     

     

    • This reply was modified 5 years, 4 months ago by  bsahin.
    #7066

    techcheck
    Member

    Hi,

    I have also had this problem on my blog. I have installed the Facebook plugin and i have added code above, but i am still getting iframe cut off on the social buttons. Here is a link to the site http://blog.techcheck.com.au.

    Thank you

    #7099

    techcheck
    Member

    Never mind i fixed the issue. Set an important rule for height on the article iframe code

    #7669

    gbacca
    Member

     

    Sorry, but I pasted the code you wrote above and I’m still have the sane problem with two icons: Google+ and Facebook-like.

    @techcheck: could you write here what is the right css code you are using?

    Thank you for your help.

    #7716

    gbacca
    Member

     

    Hi,

    any help will be appreciated. Thank you.

    #7750

    bsahin
    Keymaster

    Hey All, you can add this css rule in to the style.css it was only addThis and ShareThis plugin. Otherwise you need more css rules for each plugin.

    .st_plusone_buttons iframe, .st_fblike_buttons iframe, .addthis_toolbox iframe, .socialize-in-content iframe {
    padding:0px !important;
    background: none;
    border: none;
    box-shadow: none;
    }

    .stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices, .stButton .stButton_gradient {
    height:auto !important;
    }

    #7751

    gbacca
    Member

    I did it, but I still have the same problem. Please, check it here: http://www.germanbacca.com

    Thank you.

    Update: I have to delete that line on css because this was that facebook-like button had around 50px height (using firefox), and youtube videos were just 50% height.

    #7764

    techcheck
    Member

    @gbacca here is the exact code i have running at blog.techcheck.com.au.

    article iframe {

    overflow: auto !important;

    padding: 2px;

    background: #fff;

    padding: 2px;

    border: 2px solid #f8f8f8;

    position: relative;

    border-radius: 4px;

    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);

    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);

    box-shadow: 0 1px 4px rgba(0,0,0,.2);

    line-height: 0;

    }

    this code can be found under the mainĀ column elements styles. set the overflow to auto !important and edit the x and y padding till youĀ haveĀ reached the desired amount. hope this helps.

    #7810

    bsahin
    Keymaster

    Hey gbacca here is the last working solution for your shareing buttons:

    .st_fblike iframe {
    padding:2px;
    background:none;
    height:29px !important;
    box-shadow:none;
    width:auto !important;
    }

    .st_plusone iframe {
    padding:0px;
    background:none;
    height:29px !important;
    box-shadow:none;
    width:auto !important;
    }

    add this css rules in to the main css and test it live. It will be working %100.

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

You must be logged in to reply to this topic.