How to display twitter widget in full width screen

Question

I am using bootstrap fluid container layout to display full width content for my website.

I want to display my twitter widget block in the full width but if i try to make it full width using css or jQuery then its not working.

I use the following css to make the widget 100% but its not working.

  .timeline-Widget {
        background-color: #fff;
        border-radius: 4px;
        max-width: none !important;
        width: 100%;
    }

Here is screenshot for twitter widget.

I want to make it full width.

Please provide me appropriate solution for full width twitter widget.

This wont help. We will need more code to understand your problem. Maybe some screenshots, a fiddle, etc would help. But the above code doesn't help us much to understand what you are facing. — Ajit Kumar Singh, Jul 12 '16 at 05:25
@AjitKumarSingh , i just edit my question and attach a screenshot of twitter widget. — arun kamboj, Jul 12 '16 at 05:54

score 2 · Accepted Answer · answered Jul 12 '16 at 06:36

Here's some of the code I'm copy-pasting :

CSS

iframe[id^='twitter-widget-0'] {
    height:600px !important;
    margin-bottom:10px !important;
    width:100% !important;
}

JavaScript

$(window).on('load', function() {
    $('iframe[id^=twitter-widget-]').each(function () {
        var head = $(this).contents().find('head');
        if (head.length) {
            head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
    }
        $('#twitter-widget-0').append($('<div class=timeline>'));
    })
});

Also do refer the link. They have other solutions that might work.

How to display twitter widget in full width screen

1 Answers1