WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] twitter widget overlaps other widgets (12 posts)

  1. Jason Griffiths
    Member
    Posted 1 year ago #

    I have started to use the twitter timeline widget (jetpack) since twitter updated to API v1.1 but cannot due to it overlapping other widgets in my sidebar or if it placed at the bottom it vanishes below my footer.

    Can you advise how to fix this issue?

    I hope its a simple fix.

    If you would like to see what happens when in use, please contact and i will activate it to view.

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Could you post your site URL here, so I can have a look?

    If you want it to remain private, you can also contact us via this contact form:
    http://jetpack.me/contact-support/

  3. Jason Griffiths
    Member
    Posted 1 year ago #

    http://thecrewenews.co.uk/

    I have currently got 2 widgets overlapping each other (1 blank to force the an fitting area & 1 the jetpack twitter widget).

    when your ready to view i will remove the blank one

  4. George Stephanis
    Automattic Lead Code Monkey
    Plugin Author

    Posted 1 year ago #

    Howdy, Jason.

    You're using Masonry, which absolutely positions the elements before the iframe loads (as the Twitter Widget generates the iframe via javascript).

    If you'd like, you can use CSS to do something like...

    {{{
    .widget_twitter_timeline {
    min-height: 416px;
    }
    }}}

    which will force it to take up the proper area before the iframe loads in. Or just delay your Masonry call until after the iframes load ... either on document.ready or window.load (I'm not sure exactly where you're calling Masonry in from)

  5. Jason Griffiths
    Member
    Posted 1 year ago #

    my css knowledge is limited but always learning.

    Can you point me in the right direction on either where to insert the above or on where the other requires to be set.

  6. George Stephanis
    Automattic Lead Code Monkey
    Plugin Author

    Posted 1 year ago #

    Do you have the Custom CSS module enabled in Jetpack? If so, you should be able to just add the stuff between the {{{ and the }}} in your Appearance > Custom CSS page.

  7. Jason Griffiths
    Member
    Posted 1 year ago #

    It has [Learn More] & [Configure] buttons so YES it must be active.

  8. George Stephanis
    Automattic Lead Code Monkey
    Plugin Author

    Posted 1 year ago #

    Appearance > Edit CSS, rather.

    Just pop it in there, and it should work for you.

  9. Jason Griffiths
    Member
    Posted 1 year ago #

    i added

    {{{
    .widget_twitter_timeline {
    min-height: 416px;
    }
    }}}

    and it just errored, nothing happened

    unexpected error '{' at line 14, col 1.
    unexpected error '{' at line 14, col 2.
    unexpected error '{' at line 14, col 3.

    unexpected error '}' at line 18, col 1.
    unexpected error '}' at line 18, col 1.
    unexpected error '}' at line 18, col 1.

  10. George Stephanis
    Automattic Lead Code Monkey
    Plugin Author

    Posted 1 year ago #

    Yeah, I meant to pop in only the stuff BETWEEN t he {{{ and the }}} -- not inclusive of the {{{ and the }}}

  11. Jason Griffiths
    Member
    Posted 1 year ago #

    woohooo, Thank you so much IT WORKED =D

    have now removed the blank widget and the jetpack twitter widget is sitting perfectly =D

  12. Jason Griffiths
    Member
    Posted 1 year ago #

    Thank you for you excellent help

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.