WordPress.org

Ready to get started?Download WordPress

Forums

WP Float
[resolved] Multiple WP Float widget panels overlapping (3 posts)

  1. gillianlewiscmb
    Member
    Posted 1 year ago #

    I am attempting to use WP Float to show floating icons with links for Facebook, Twitter and Google+ on the top right position using the widget option.

    I want them to display vertically so it seems like I have to enter the code for each into a separate widget to allow this to happen (otherwise they show horizontally). Therefore, I have set the "distance from Top/Bottom" for each of the three widgets to allow some separation between the icons. However, when I load the page, after appearing in the correct positions, the three icons rise to the top of the page and overlap somewhat.

    I am also using a fourth WP Float widget in the top right position and this is completely unaffected. This is the website under development: http://www.c-a-b-l-e.org.uk

    Can you suggest how I correct this (in non-developer language please :-D)

    Many thanks

    wordpress.org/support/plugin/wp-float

    http://wordpress.org/extend/plugins/wp-float/

  2. samhagin
    Member
    Plugin Author

    Posted 1 year ago #

    You can use html to align the icons vertically such

    <div style="font-size:0px">
    <a href="https://www.facebook.com/pages/Gillianlewiscmb/328218233907399" target="_blank"><img title="Like us on Facebook" src="http://www.c-a-b-l-e.org.uk/wp-content/uploads/2012/09/Facebook-logo-for-floating-panel-60px-by-60px.png" alt="" width="35" height="35"></a><br />
    
    <a href="https://twitter.com/gillianlewiscmb" target="_blank"><img title="Follow us on Twitter" src="http://www.c-a-b-l-e.org.uk/wp-content/uploads/2012/09/twitter-bird-white-on-blue-60px-by-60px.png" alt="" width="35" height="35"></a><br />
    
    <a href="https://plus.google.com/u/1/#111202190173297212918" target="_blank"><img  title="Join us on Google +" src="http://www.c-a-b-l-e.org.uk/wp-content/uploads/2012/09/googleplus-logo-64.png" alt="" width="35" height="35"></a>
    
    </div>

    adding a
    after the image ensures it is put on a separate line and also font-size:0px, gets rid of the space between the images. simply put that code in one wp float widget and it will show all three images

  3. gillianlewiscmb
    Member
    Posted 1 year ago #

    Thank you so much - I really appreciate your help.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic