My goal is to showcase a collection of responsive embedded tweets in rows of 2.
Here are the key elements of the code that have enabled me to achieve this:
HTML
<div id="tweets"></div>
<script src="https://platform.twitter.com/widgets.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
CSS
#tweets {
margin: 10px auto 0;
max-width: 820px;
width: 95%;
}
#tweets .row {
overflow: hidden;
}
#tweets .row > .tweet {
max-width: 520px;
width: 49%;
}
#tweets .row > .tweet:nth-child(1) {
float: left;
}
#tweets .row > .tweet:nth-child(2) {
float: right;
}
#tweets .row > .tweet .twitter-tweet-rendered {
max-width: 100% !important;
width: 100% !important;
}
JavaScript
window.onload = (function() {
// sample data
var tweets = [
'629488522752212992', '629487749200936961', '629488522752212992',
'629487749200936961', '629488522752212992', '629487749200936961'
];
var container = $('#tweets');
var list = '';
// create markup before rendering tweets
for (var i = 0, even = true; i < tweets.length; i++, even = i % 2 === 0) {
if (even) {
list += '<div class="row">';
}
list += '<div class="tweet"></div>';
if (!even) {
list += '</div>';
}
}
container.html(list);
// render tweets
$.each(tweets, function(i) {
var tweet = container.find('.tweet:eq(' + i + ')');
twttr.widgets.createTweet(this, tweet[0], {
'cards': 'none'
});
});
});
Demo: https://jsbin.com/yigucejice/edit?output
The issue I'm facing is with inconsistent display of borders on the tweets across different browsers. For instance, the right border of some tweets may be hidden in IE 11 or the bottom border may not show in Firefox 39.0.
I want the borders to consistently appear on all browsers.
I've tried adjusting the styles of the iframe (.twitter-tweet-rendered) within the tweets by modifying the margin and height, but so far, it hasn't resolved the problem.
How can I address this issue? If not, is there a way to disable the borders?
https://i.sstatic.net/GzX42.jpg
Solution
Thanks to the solution provided below, I made changes to my JavaScript code as follows:
twttr.widgets.createTweet(this, tweet, { 'cards': 'none' }).then(function(frame) {
// remove EmbeddedTweet's border
$(frame).contents().find('.EmbeddedTweet').css({ 'border': 'none' });
// add border on the placeholder that holds the iframe
tweet.addClass('border');
});