Twitter Timeline Issue - Padding and Background

Get Started
1

Hi all

When I add data-chrome=“transparent” to the embedded twitter timeline the padding then disappears. Its a known issue at the moment amongst the forums though can’t seem to find a solution.

If data-chrome=“transparent” is removed everything works, though you’re then limited with twitters Dark/Light colors, meaning you can’t add your own background-color to match your site.

This is what’s causing the issue:

.var-chromeless .tweet {
padding: 12px 2px 10px 58px;}

which overrides

.tweet {
padding: 12px 12px 10px 69px;}

Anybody having the same problem? Know of a fix?

Thanks, CB

2

Can you just wrap it in another element—like a div—with padding?

3

Hi Ralph

Everything is wrapped up in an iframe, this is the problem, I can’t change the padding manually. I already have a div wrapped around the transparent timeline, this is how I get my desired background-color.

I have found a temp solution though doesn’t work well on mobile and was hoping not to use javascript for something so trivial.

window.setTimeout(function(){
        $(".twitter-timeline").contents().find(".tweet").css("padding","12px 12px 10px 69px");
      }, 1000);

Is there a workaround?

Thanks, CB

4

Given the online discussions about this, it seems there isn’t a proper solution yet.

5

Yes ralph, you’ve probably been reading the same posts, that’s the reason I’m here to see if anybody knows of a work around.

Thanks, CB