Customize twitter embed widget



Is it possible to display for example two tweets on the same line with the twitter widget embed ?

(Schema )




You should be able to display an embedded Tweet in a grid layout and have the Tweet adjust to the available width of the containing element. Have you experienced issues displaying an embedded Tweet inside a grid column?



The only solution i have found is javascript.

I display all the tweet 2per2 with an hidden scrollbar.I have add display inline-block to li
Then when you click on the 'load more" button i have add onclick to execute again the script. You can see it here

I should work on responsive now.

Thank’s for your answer.


An example of a two column layout with one embedded Tweet per column using the Bootstrap grid framework:


Thank’s for your link but i think you don’t understand.

Actually i use timeline widget in order to have all tweet from one people in a list.

This one for example :

<a class="twitter-timeline" href="" data-widget-id="569044950940393472">Tweets de @OneT0uch</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+"://";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

It’s not embed of one tweet but embed of all my tweet.

And the solution i have found it’s to use javascript in order to add rules to the iframe.(Take a look at the link i give you above).

Is it possible to do it another ways ? or it’s the better solution.


A Twitter embedded Timeline is currently a single column view of Tweets.


Okay,so i will keep my javascript solution.

Here it is :

                 function f1()
           hideTwitterBoxElements ();
              if (window.matchMedia("(min-width: 600px)").matches) { 
               var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
    setTimeout( function fun() {
        if ( $('[id*=twitter]').length ) {
        $('[id*=twitter]').each( function(){
            if ( $(this).width() == 220 ) {
                $(this).width( 198 ); //override min-width of 220px
            var ibody = $(this).contents().find( 'body' );
         ibody.width( $(this).width() + 20 ); //remove scrollbar by adding width

            if ( ibody.find( '.timeline .stream .h-feed li.tweet' ).length ) {
            ibody.find( '.timeline' ).css( 'border', 0 );

            ibody.find( '.timeline .stream' ).css( 'overflow-x', 'hidden' );
            ibody.find( '.timeline .stream' ).css( 'overflow-y', 'scroll' );
            ibody.find( '.p-author .profile .p-name' ).css( 'color', 'rgb(23, 57, 105)' );
          ibody.find( '.tweet' ).css( 'display', 'inline-block' );
            ibody.find( '.h-feed li' ).css( 'width', '500px' );
                    ibody.find( '.h-feed li' ).css( 'display', 'inline-block' )
                      ibody.find( '.h-feed li' ).css( 'vertical-align', 'top' )
                 ibody.find( '.tweet-actions' ).hide();
                 ibody.find( '.inline-media' ).hide();
                    ibody.find( '.timeline' ).css( 'overflow', 'hidden' );
            ibody.find( '.timeline-header').hide();
            ibody.find( '.timeline-footer').hide();
                 ibody.find( 'button.load-more').attr('onclick','parent.f1()');
            else {
        if ( hideTwitterAttempts < 3 ) {
    }, 1500);


vertical-align : top and display : inline-block are the most important


Although you can do this, please remember that we don’t support manipulating the HTML within the frame sandbox. The content of a timeline and mark-up for a Tweet may change without notice and we don’t guarantee that there will always be ways to maintain these hacks.




Thank’s for your answer Benward.

I hope this features will be add in next update ? It will be a good thing.

And i don’t recommend javascript solution but actually this is the only way to do it.