twitter widget overlaps other widgets

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:
https://jetpack.me/contact-support/

https://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

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)

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.

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.

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

Appearance > Edit CSS, rather.

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

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.

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

woohooo, Thank you so much IT WORKED =D

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

Thank you for you excellent help