WordPress.org

Ready to get started?Download WordPress

Forums

Impossible Image Link positioning problem (5 posts)

  1. MostafaAbedi
    Member
    Posted 1 year ago #

    Hi everyone, and thanks to the community for great support. :)

    I have a problem that has taken me days to figure out.

    The social follow icons I get from addthis website appear vertically instead of horizontally. I want to make it appear horizontally but I have found that it is impossible to do so.

    So this is how I want it to look like:
    https://lh5.googleusercontent.com/-BZP_5x1CFuc/UGp2x7BvWOI/AAAAAAAAAf8/OHoUpIFdTHk/s800/hor.PNG

    But this is the way it actually looks:
    https://lh5.googleusercontent.com/-2kBcp4Wn4PI/UGp2xtCIMFI/AAAAAAAAAf4/SPVNn_0HDcM/s800/vert.PNG

    Below is the code I got from https://www.addthis.com/get/follow

    <!-- AddThis Follow BEGIN -->
    <p>Follow Us</p>
    <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_follow" addthis:userid="TheMostafaAbedi"></a>
    <a class="addthis_button_twitter_follow" addthis:userid="theMostafaAbedi"></a>
    <a class="addthis_button_google_follow" addthis:userid="106914586115617584077"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506a607f490b6601"></script>
    <!-- AddThis Follow END -->

    The website that I am working on is http://www.under-review.com

    The specific page that the problem occurs is http://www.under-review.com/about under Mostafa Abedi description.

    Thanks in advance to all who respond.

  2. dmd54
    Member
    Posted 1 year ago #

    Have you tried floating them? Adding this to your CSS may do it.

    .addthis_toolbox addthis_default_style a {
    float: left;
    }
  3. MostafaAbedi
    Member
    Posted 1 year ago #

    @dmd54

    Thanks for replying. I tried it out but didn't work. I don't have access to .addthis_toolbox addthis_default_style

    So instead I added it with style="" like below

    <!-- AddThis Follow BEGIN -->
    <p>Follow Us</p>
    <div class="addthis_toolbox addthis_default_style" style="float: left;" >
    <a class="addthis_button_facebook_follow" addthis:userid="TheMostafaAbedi"></a>
    <a class="addthis_button_twitter_follow" addthis:userid="theMostafaAbedi"></a>
    <a class="addthis_button_google_follow" addthis:userid="106914586115617584077"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506a607f490b6601"></script>
    <!-- AddThis Follow END -->

    which I am not entirely sure is correct.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Dmd54's CSS recommendation depicts applying float: left to each anchor tag.

  5. dmd54
    Member
    Posted 1 year ago #

    That would be fine but technically it's always better to add styles into the CSS rather than HTML. Also as Andrew Nevins noticed, it should be specific to the anchor.

    I guess it's getting the style from the javascript link to addthis.com. If you have an account with them, I would try using their support since it's most likely a problem with their software.

    Have you installed the plugin? That would probably be the better way to do it as well as more WP compatible.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.