How to set padding/margin for Google +1 button in WordPress?

2 Views

http://healthybodyguru.com

If you load the site and wait 3 seconds you’ll see the attentionGrabber bar appear in the header. It has shortcodes to add the social buttons (FB, Twitter, G+1), but for some reason the Google +1 button is too high.

Read More

I’ve tried adding custom CSS to lower it by adding margin/padding to the top but that didn’t make a difference.

Any ideas what CSS I can use to make it line up with the other social buttons?

Thanks!

Post Views: 2

Related posts

Leave a Reply

5 comments

  3. try putting a span tag around the google +1 button and pad that top.

    <span style="padding-top:5px;">[shortcode]</span>

    I don’t know if you tried this with custom css but if not give it a shot and see what happens. a style tag in the html should override any styling that the stylesheet is giving the element.

  4. As you can see I like divs and not spans. I’ve always gotten better results from divs than spans when css is playing around.

    <div id="attentionGrabber">

  <div id="centeredPart" style="width: 575px; margin:0 auto">

    <div style="float:left;" class="facebookBtn">
      ...like code....
    </div>  

    <div style="float:left;" class="twitterBtn" >
      ...twitter code...
    </div>  

    <div style="float:left;" class="plusoneBtn">
      ...+1 code...
    </div>

    <div style="float:left;" class="linkToForums">
      Check out our new forums:
      <a class="link" href="http://healthybodyguru.com/forum/">go!</a>
    </div>

    <div style="clear:both"></div>

  </div> 

 <div id="closeAttentionGrabber"></div>


</div>

  5. I just put an invisible letter behind mine. A bit hacky but it worked for me.

    <br><div class="g-plusone" data-annotation="none"></div><span style="font-size:33px;opacity:0;">G</span>