Change Twitter Widget Width to Wider than 520px

Jaime Lerner coding 144 Comments

I’ve been playing around with responsive design quite a bit lately (yes, I know I need to work on my OWN site for that, but the cobbler’s shoes are always the last to be repaired), and I came upon a puzzling issue: How do I change the Twitter Widget width?

When I was working on a WordPress site and using the Twitter Widget in the right-hand column, it was totally fine. But, as I resized my page and moved the right-hand column’s content into a full-size width container, I found the Twitter Widget didn’t fit. It just came up short, which didn’t look good (especially since the Facebook social plugin above it stretched to 100% with no problem).

I really only needed it to be 40px wider, but from what Twitter had on their site, it couldn’t be done. They say a “tweet” will max out at 520px wide, so that’s the max size of the container. The only thing is, there is a nice little border around their widget, and I wanted that border to match up with the border around the facebook social plugin (if you follow me … um .. sorry, didn’t mean to use Twitter humor there).

Anyway, I dug into the rendered code from the widget and saw the width was listed as 520px (of course). So, all I had to do to change it was to target that DOM item with CSS and “voila!” my widget was as wide as I wanted it to be!

Here’s the pertinant CSS you can add to your stylesheet or in a style tag in the head of your page:


If adding to the head of your page:

<style type="text/css">
iframe[id^='twitter-widget-']{ width:100% !important;}
</style>

OR just adding to your CSS:

iframe[id^='twitter-widget-']{ width:100% !important;}

NOTE: The iteration of the widget can change depending on where it’s loading (single page, posts page, etc.), so I found I had to target ALL numerical variations by using a “wildcard” CSS selector. Of course, you can put in whatever pixel width or percentage you want. I needed mine to be fluid for responsive design, so I put mine at 100% so it always filled the container it was in no matter the width.

Note #2: I added in the !important property rule on May 8, 2014 when it seemed the original code was no longer overriding the Twitter code. This seems to have solved it. Happy tweeting!

UPDATE JUNE 25, 2015
It seems twitter has changed the code again. This time they have set the max-width of the widget INSIDE of the iframe (i.e. on code generated from their website). Because of this, there’s nothing I can do to target CSS generated inside the iframe (because of cross-domain restrictions). Previously the width was set in the iframe itself only. It’s still set in the iframe, and that is still being modified correctly because the iframe code is hosted on YOUR site, but the code INSIDE the iframe is resetting the max width to 520px now, and we can’t modify that unfortunately.

If anyone has a possible solution to this now, it would be great to share it in the comments.

UPDATE JULY 10, 2015
Vlado says he has a working solution for this – I haven’t tested it myself yet, but you can check it out here.

UPDATE APRIL 15, 2016
Matt gave an update that Twitter has now made the widget responsive – but now the font size is too large.

Click here for the original announcement about the new responsive timeline.

Share this Post

Comments 144

  2. um i dont know how to start. im so sorry but i really really need this. im new in this kind of stuff so basically im like a blank sheet of paper. please tell me how to begin. plese help me. :D

    Reply

  5. Hi Sue,

    You’re trying to make it SMALLER than what it defaults to? I believe It should automatically resize smaller using the default plugin code from Twitter. The issue has been to get it LARGER.

    If you log into your Twitter account and go here: https://twitter.com/settings/widgets, you should be able to use the code provided to embed your feed.

    Reply

  6. Hi
    Yes trying to make it smaller than the default. No it doesn’t automatically resize down to fit the space, despite my best efforts with enclosing div and the wdith option within the widget.

    I have the code and it embeds fine, it just spills over the space available and I don’t want to use overflow:hidden because, well basically I don’t want to hide the overflow :o)

    Thanks anyway, I think I’ll need to look at redesigning the page layout.

    Sue

    Reply

  7. So many headaches.

    Why won’t Twitter width modification work in my sidebars. I’ve tried the codes but it’s locked at 240.

    Also, how do I TURN OFF real time? I suspect it’s slowing down my site.

    Last thing… any way to remove avatars? It’s not necessary to see my dopey picture on every tweet.

    thank you so much

    Reply

    1. Hi Joe, you’re trying to have the width change in your WordPress sidebars?

      Here is where I’ve done my widget mods: http://www.netprofitexplosion.com/blog. You’ll see the width on the sidebar is around 280px … then, when you resize the browser smaller, you’ll see the sidebars will go away and the twitter widget moves to the BOTTOM, but goes much wider. This is one of my responsive layouts in WordPress, so I needed the widget to dynamically change for me.

      I’d have to see your CSS to see why it’s not working for you. As for avatars, I don’t think you can change that normally, but perhaps there’s a way to do it if you dig into the CSS (as I did to figure the width thing out).

      Reply

  8. The “style tag” works nicely if you need something bigger than 520px, but it looks like it’s impossible to have something smaller than 180px.

    Disappointing, I was using the “old widget” to have 155px width.

    I hope someone can find a solution…

    Reply

  9. You can easily make the widget smaller than 180px by changing the min-width and forcing it by using “!important”. Just set your width to what you want (I suggest you don’t go narrower than 130px or your header won’t look good), then set the min-width to the same or less: 

    <style type="text/css">
iframe[id^='twitter-widget-']{ width:130px !important;min-width: 100px !important;}
</style>
    Reply

    2. Is there a way to allow the widget to go smaller than 180px, but still have the width set to 100%? I can’t get this work at all.

      Reply

      1. Hi Daz,

        You should be able to make it work by setting your width to 100% and changing your min-width to be smaller than 180px:

        <style type="text/css">
iframe[id^='twitter-widget-']{ width:100% !important;min-width: 100px !important;}
</style>
        Reply

    4. Thank you. Being able to lower the minimum widths and heights of the twitter iframe has helped greatly. I didn’t have to search far to find your solution. :)

      Reply

  10. Hi, I have followed the instructions detailed about but my twitter widget still does not re-size properly. My problem is that when the page is re-sized smaller the widget overlaps the sidebar area. Is this because the widget has a min width set, that is causing it to remain at its min width and overlap? Is there any way to get around this….? I added
    iframe[id^=’twitter-widget-‘]{ width:100% !important;min-width: 100px !important;} to my themes css but it still doesnt work.

    Any help would be greatly appreciated.
    Many thanks
    John

    Reply

    1. Hi John,

      I looked through your CSS and couldn’t find the code anywhere. Did you take it out? Or is this for another site other than awediohub? From what I could see, the min-width is still set for 180px and it should be set for 135px (which is where it needs to be before the sidebar disappears in your responsive design).

      Reply

  12. Hi, I am trying to make the widget smaller, I need it to be 140px wide to fit in a column of 160px wide. It all looks good in the other browers but when I look at it in IE the column is extended automatically to 180 again

    Reply

    1. MSIE > 6 will work with min-width, though earlier versions will NOT. Are you using an earlier version of IE? It’s also possible your page is in “quirks mode”, and in that case, it WON’T honor “min-width”. What do you have for your doctype at the top of your page?

      You should be using < !DOCTYPE html>. This will get the page out of quirks mode and should mean that it will no longer ignore the min-width attribute.

      Let me know if that’s the issue …

      Reply

  15. You’re bloody brilliant you are. This was so simple to do and now looks so much better on my website. I think I might love you!

    Reply

  17. Wow, you really helped me with the CSS code to widen the Twitterfeed in Blogger!
    I searched for hours but then my geekgoddes came by!

    Thank you so much!

    Reply

  18. Any luck on a simple font-size fix, one that is embeddable on that same page? I can’t call a css on the server (long story) so the code has to be in the header or with the twitter widget code. thanks!

    Reply

  27. I had a problem of sizing the width more than 280px… and while searching for a solution I came across this article.

    The solution provided here worked like magic.

    Thanks, Geekgoddess … God bless…

    Shobhan

    Reply

  29. Putting it in the head of the page works great. No matter what I do though, I can’t get it to work in a .css using:

    iframe[id^=’twitter-widget-‘]{ width:100%;}

    I also tried .twitter-timeline iframe[id^=’twitter-widget-‘]{ width:100%;}

    I’ve tried a bunch of stuff — the width just defaults as if the width: 100% isn’t there. I am new to CSS. Are you sure this works? Thanks

    Reply

    1. Hi Frank,

      Yes, I’m sure it works. :) It’s still working fine on my own client’s page (as cited above). This is with it in the CSS file.

      Can you give me a URL to look at so I can see why it doesn’t seem to be working for you? Please make sure it’s a page where you have the CSS code in place.

      Thanks!

      Reply

  30. Hi geekgoddess. You are awesome for getting back to me so soon. It’s just a local page right now, and I can’t really submit it until I get this figured out. As I say, I’m very new to .css, but I tried to put this line:

    iframe[id^=’twitter-widget-‘]{ width:100%;}

    in a .css file (call it foo.css) that is linked to my default page with a statement like:

    My twitter widget code (changed the names and ids and removed some code to protect the innocent)

    <a class="twitter-timeline" href="https://twitter.com/Foobar&quot; data-widget-id="123" etc.
    etc. etc.

    is under a div class=”homepage”>. I don’t really need the class=”tw”, I was just playing.
    In this scenario, just

    iframe[id^=’twitter-widget-‘]{ width:100%;} in my foo.css file should work? I’ve tried:

    .homepage iframe etc.
    .homepage .tw iframe etc.

    Again, all this works great if I use your style code in the .aspx file. I realize I don’t know what I’m doing yet, but I would have figured I could get this working. I must be missing something really stupid.

    Thanks

    Thanks

    Reply

    1. Hi Frank,

      It’s difficult to trouble-shoot without seeing the actual page and associated HTML and CSS. If it works when you put it in the head of the page, but NOT when you put it into your CSS file, then there is something else in your CSS file overriding it. Try putting it in your CSS file at the VERY END of the file and make certain there is no other CSS loading after you include that CSS file into the head of your document. This basically puts it in the same place as if you had put it into the head of the document by itself.

      If it still doesn’t work at that point, I won’t be able to help until you launch your page and I can look at it.

      let me know if that solves this for you. :)

      Reply

      1. It doesn’t really solve it, but I’ll keep looking into it. But today something even weirder happened. I now have the style in the .aspx which always worked. It worked when I went to sleep. I hadn’t touched anything, and all of a sudden, it doesn’t work anymore — the width just defaults to 520 on all browsers. I cleared caches, etc., but now the 100% just doesn’t work at all. Have you even seen that?

        Reply

        1. Interestingly enough, when I looked at a site where I had that code in place, it ALSO was no longer working, whereas it WAS working a couple of days ago. I’m wondering if Twitter made a change in their javascript that dynamically creates the code or if it was something else. I was able to fix it by adding the “!Important” rule after the width:100% in my CSS.

          To be safe, I’m going to edit the code at the top of this post to reflect that.

          Reply

  31. Thanks geekgoddess. That fixed it. I had !important in there before, but had taken it out for some reason, since it used to work without it. It is now back, and that problem is solved. Thanks again.

    Reply

  32. iframe stuff now working no matter where I put it. Not sure what was happening, but all good now. Thanks a lot for the help.

    Reply

  36. OMG. I have been searching for a fix for this for like an hour and nothing worked .. I almost gave up and then your code did its magic. Thank you so much!!! x

    Reply

  41. Perfect !

    I spent many hours to struggle with the dom and javascript stuffs to access the iFrame properties without success … I tried this and I got the exact result that I expected, thank you :D

    Reply

  53. It is 25th of June 2015 and this no longer works on my website. What’s wrong with twitter, I thought they are top-class programmers but they are just pain in the ass.

    Reply

  54. Hello GG

    I used your

    iframe[id^=’twitter-widget-‘]{ width:100% !important;}

    here http://martynglanville.com and it worked perfectly, stretching my Twitter feed the full width of the content page.

    However, now it seems to have reverted to its original width.

    Then only change I made was to publish a new article and update an image in my slider.

    Can you suggest anything?

    Best wishes

    Martyn

    Reply

  56. Hey Martyn, my friend Jonas Badalic (kudos to him) has found a solution (I am not a programmer but a finance student with his own website). You should create new css file for example styletwt.css and than copy this in that file: .timeline{ max-width:100% !important; } …. after that you copy this on your html page before the end of :
    window.onload = function(){
    var cssLink = document.createElement(“link”)
    cssLink.href = “styletwt.css”;
    cssLink .rel = “stylesheet”;
    cssLink .type = “text/css”;
    var frame = document.getElementsByTagName(‘iframe’);
    var myFrame = frame[0].contentWindow.document;
    myFrame.getElementsByTagName(‘head’)[0].appendChild(cssLink);
    }
    …. so you dont need anything in your main css file. That’s it. If iframe box has “blank spacing” in the bottom you can correct with style=”margin-top: -3em” for example. Best solution so far.

    Reply

  57. I’m using Drupal and I don’t have
    I’m using WYSIWYG editor and a module for CSS and js scripts.
    where should I put it

    Reply

  58. My jQuery solution (works with updated Twitter widget):

    $(window).on(‘load’, function() {
    var hd = $(‘head’, $(‘#twitter-widget-0’).get(0).contentWindow.document);
    if (hd.length) {
    hd.append(‘.timeline { max-width: none !important; width: 100%; } ‘);
    }
    });

    Reply

    1. Thank you for your contribution! My only suggestion is to replace the $ with jQuery to ensure there are no conflicts with existing libraries (or use noconflict). Also, note that the iteration of the twitter widget (the number) can change depending on various factors – so you should use a wildcard rather than something like #twitter-widget-0 – unless you are CERTAIN that is the number of your widget on the page. :)

      Reply

  60. Hello ! First of all, thanks for this topic, it has been very helpfull until… well until Twitter changed again their code and my website has now the box back to 520px ! ;)

    I’ve tried the jQuery solution posted by Simon but it doesn’t work even if I replace the quote by the right ones and make sure that my box is called “twitter-widget-0”. Oh, and of course, jQuery is installed on my bootstrap so…

    Can someone please help me ? Much appreciated !

    Reply

    1. I actually haven’t tried Simon’s solution myself since I’m not using the twitter widget on any of my sites right now. At some point I’ll see if I can install it again and try to fix the issue. I’m still not sure it’s entirely possible since the element that needs to be adjusted is on Twitter’s domain now….

      Reply

  61. Hi

    at last I was able to fix it. Here is working solution for me:

    1. you have to style your iframe of course

    e.g.
    iframe[id^=’twitter-widget-‘] {
    height:70px !important;
    margin-bottom:10px !important;
    width:100% !important;
    }

    2. you have to add JS to fix content of twitter iframe:
    add this to your page:

    $(window).on(‘load’, function() {
    $(‘iframe[id^=twitter-widget-‘).each(function () {
    var head = $(this).contents().find(‘head’);
    if (head.length) {
    head.append(‘.timeline { max-width: none !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; } ‘);
    }
    });
    });

    Reply

    1. if you want to get rid of scrollbars (because after mentioned JS script they are shown even if data-chrome property contains “noscrollbar” keyword), just increase size of .stream box. So command will look like this:

      head.append(‘.timeline { max-width: none !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 102% !important; } ‘);

      also make sure content of “append” funtion is in style tag. It is removed after posting comment :)

      Reply

      1. Does it work smoothly? Can you please elaborate some more where to put what (for us non-programmers), I would really appreciate it. :)

        Reply

      2. I’ve put the one about iframe in style.css and other one in my html page code. But it doesn’t work for me. I guess I am doing something wrong…

        Reply

    2. Hi,

      Congrats for this idea.
      I’m trying to include your code, but it doesn’t work because of the delay maybe.
      So, I’ve added a settimeout with 2sec delay, and it works !!

      $(window).on(‘load’, function() {
      setTimeout(function(){
      $(‘iframe[id^=twitter-widget-‘).each(function () {
      var head = $(this).contents().find(‘head’);
      if (head.length) {
      head.append(‘.timeline { max-width: none !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }’);
      }
      });
      },2000)
      });

      Reply

    3. jQuery(window).on(“load”, function() {
      jQuery(“iframe[id^=twitter-widget-“).each(function () {
      var head = jQuery(this).contents().find(“head”);

      console.log(head);
      if (head.length) {
      head.append(“.timeline { max-width: none !important; width: 99% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }”);
      }
      });
      });
      100%
      Working Code

      Reply

      1. Funciono, pero toco agregar al texto que escribimos … para que pueda funcionar ya que escribe en la cabecera pero no dentro de las etiquetas, por eso al principio no me funcionó. Saludos y gracias.

        Reply

    4. A slight variation using inline styles to reduce the chance that official inline styles override styles dynamically added within the header.

      $(window).on(‘load’, function() {
      $(‘iframe[id^=twitter-widget-‘).each(function () {
      var timeline = $(this).contents().find(‘.timeline’);
      if (timeline.length) {
      timeline.attr(‘style’,’width:100%;max-width:100%;’);
      }
      });
      });
      /*****END TWITTER SIZING*****/

      Reply

  62. Vlado’s solution had a couple of errors, this works:

    $(window).on(‘load’, function() {
    $(“iframe[id^=twitter-widget-]”).each(function () {
    var head = $(this).contents().find(‘head’);
    if (head.length) {
    head.append(‘.timeline { max-width: none !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }’);
    }

    })
    });

    Reply

    1. I couldn’t get this to work – until I added tags within the head.append:

      $(window).on(‘load’, function() {
      $(‘iframe[id^=twitter-widget-‘).each(function () {
      var head = $(this).contents().find(‘head’);
      console.log(head);
      if (head.length) {
      head.append(‘.timeline { max-width: none !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }’);
      }
      });
      });

      Reply

      1. I am working on a Ruby on Rails application. Where should this javascript code be placed? If I add it with the same Twitter script tag for the widget the timeline disappears. If I add it to my application.html..erb file or in a separate script tag on the page of the widget nothing happens. I tried Tim Coysh’s code.

        Reply

      2. I’m getting an error when I look at the page source on the first line $(window)

        [Error] ReferenceError: Can’t find variable: $
        global code (mywebsite.com, line 32)

        Reply

        1. First, make sure you have jQuery loaded. But also if you are running anything else like prototype, you could have a conflict.

          Change all the $ to jQuery in your code and see if that works.

          To avoid conflicts you should ALWAYS insert jQuery code using the following wrapper:

          $.noconflict();
          jQuery(document).ready(function($){
          // code that can use the $ without conflict
          });

          OR add in jQuery.noconflict();

          See the documentation here: https://api.jquery.com/jquery.noconflict/

          Reply

          1. Thanks so much. I’m running a gem in the program that is supposed to install jQuery from my understanding. This is why I was initially lost. Before I read your update I ended up adding jQuery in my code which took care of the error I was getting. However I’m still not successful implementing the suggest code. I created a JS fiddle (my first one) where I may be able to guess the correct code to hopefully override the width parameter to 100%.

            Reply

      3. You forgot to place tags in the head.append(), without them it’s just literally placing raw css in the tags of the iframe which is pointless.

        Reply

        1. Max, thanks so much for responding. I’m new to using Javascript/jQuery. I found it odd that I did not see anything tied to the iframe that Twitter creates in the solutions presented but had no idea what to do. I also do not see some of the classes/IDs (I assume that is what they are) when I inspect the widget. How should I modify the head.append() statement?

          Reply

          1. He means the < s t y l e > tags missing around the line of css you’re injecting to remove the max-width of the timeline class. Vlado mentioned this in his follow up post as apparently this site’s comments break posting of tags and maybe single quotes(?) (also fooled Tim Coysh). So the script would look like this (replace [[STYLE]] with real tag, and wow this background color scalds my eyes):

            $(window).on(“load”, function() {
            $(“iframe[id^=twitter-widget-“).each(function () {
            var head = $(this).contents().find(“head”);
            if (head.length) {
            head.append(“[[STYLE]].timeline, .timeline .stream {max-width:none !important; width:100% !important;}[[/STYLE]]”);
            }
            });
            });

            Reply

            1. Thanks for the clarification on the reply. Appreciate the help to everyone! (And sorry about the VERY pink color, lol. :) I need to redo my site — just been too busy to do so.)

              Reply

  64. I was not able to get any of the JavaScript/jQuery solutions to work in my Ruby on Rails applications. I submitted a Stack Overflow question about this. I also posted my Stack Overflow post in a local FB developer group. Brad Metcalf posted three solutions that worked for me.

    http://stackoverflow.com/questions/31193357/how-can-i-replace-100-width-in-the-new-twitter-widget-using-css-code

    I’m using the first solution in since it will search for multiple Twitter widgets on a view. The third one can be modified to search through all Twitter widgets on a page. However since I don’t have any other iframes in any of my views I opted to use the first one.

    $(document).ready(function() {
    twitterCheck = setInterval(function() {
    if($(‘iframe[id^=”twitter-widget-“]’).length) {
    $(‘iframe[id^=”twitter-widget-“]’).each(function () {
    $(this).contents().find(“.timeline”).attr(“style”,”max-width:100% !important;”);
    $(this).attr(“style”,”max-width:100% !important; width: 100% !important;”);
    });
    clearInterval(twitterCheck);
    }
    }, 1000);
    });

    Reply

  65. Great input and everything from everyone above…I just came across the updates while I had a thought and it was something similar to what everyone else did.
    I did a .contents().find() for the eventual element with the .timeline class and then removed that class (I looked up that there is only a couple things with the .timeline class and only a 6 styles with the .timeline class), and then I added my own class to that naming it .twitterTimeline. One of the css styles is for .timeline .stream which displays the vertical scroll bar, so by removing the .timeline class, i undo the usage of that style and thus remove the vertical scroll bar….so the next line i added the that same style back.
    I also found that the setTimeout is needed and while 1000 ms is good initially, page refreshes can randomly take longer it might need to be upped to 3000
    below is some stripped down version of my code to just show this.
    I just had to share my findings, thank you for everyone else and their work.

    $(document).ready(
    setTimeout(function() {
    //find nested within the iFrame the “HTML” nested tag…then find the .timeline tag
    if ($(“iframe”).contents().find(“html”).contents().find(“.timeline”).length) {
    $(“iframe”).contents().find(“html”).contents().find(“.timeline”).removeClass(‘timeline’).addClass(‘twitterTimeline’);
    $(“iframe”).contents().find(“html”).contents().find(“.twitterTimeline .stream”).css({“overflow-x”: “hidden”,”overflow-y”: “scroll”});
    }
    },1000)
    );

    Reply

  66. I don’t want to use jQuery, so I figured out a way to do it without it. Here’s the JavaScript I’m using:

    “`
    window.addEventListener(‘load’, function () {
    var twitterWidgets = Array.prototype.slice.call(document.querySelectorAll(‘iframe[id^=twitter-widget-]’))
    twitterWidgets.forEach(function (twitterWidget) {
    var head = twitterWidget.contentDocument.head
    var css = ‘ .twitter-tweet { max-width: 100% !important; width: 100% !important; } ‘
    console.log(head.innerHTML)
    head.innerHTML += css
    console.log(head.innerHTML)
    })
    })
    “`

    Also, the only class to override seems to be .twitter-tweet for me – no timeline stuff or something. Maybe we’re talking about different widgets here?

    Oh, and of course this only works with setting `width: 100% !important;` on the twitter iframe in my css.

    Reply

    1. looks like the style-tags were stripped from the code I posted. of course there would have to be an opening style type=”text/css” tag and a closing /style tag, each in angle brackets, at the beginning and end of the css string.

      Reply

  67. Again there are some changes in twitter widget (e.g. they added min-height) so I decided to post another version which works better. The version before was using ‘load’ even which didn’t work well every time. It seems ‘load’ event is not fired well when using iframe. So here is another version using twitter’s events rather than pooling mechanism.

    1. style your iframe:

    iframe[id^=’twitter-widget-‘] {
    height:70px !important;
    margin-bottom:10px !important;
    width:100% !important;
    min-height:initial !important;
    min-width:initial !important;
    max-width:initial !important;
    max-height:initial !important;
    }

    2. make sure you use loading script from twitter: https://dev.twitter.com/web/javascript/loading

    3. add this script

    twttr.ready(function (twttr) {
    twttr.events.bind(
    ‘rendered’,
    function(ev){
    var tw_iframe = ev.target;
    var head = $(tw_iframe).contents().find( ‘head’ );
    if (head.length) {
    head.append(‘[[STYLE type=”text/css”]].timeline { max-width: none !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 102% !important; } [[/STYLE]]’);
    }
    }
    )
    });

    with this script the loading should work better as event is triggered by twitter JS after it is rendered. don’t forget use correct script tags in place of [[SCRIPT]] and [[/SCRIPT]]

    Reply

    1. correction: use “style” tags in place of [[STYLE]] and [[/STYLE]]. Of course whole script has to be in SCRIPT tags also.

      Reply

      1. Many thanks again Vlado. I noticed the load inconsistency sometimes as well and glad this fixes it. As a reminder to others, along with the comments here eating style tags, single quotes are also altered and will break the above code if simply copy and pasted so be sure to replace them manually.

        Reply

    2. I’ve tried every option on this page and still not getting it. >-P With the above I get an error message on the console saying that twttr is undefined.

      Reply

    3. Hi Vlado,

      I’m having an issue where i get this error:
      Uncaught ReferenceError: $ is not defined
      on this row:
      var head = $(tw_iframe).contents().find( ‘head’ );

      Any suggestions?

      Reply

  68. Hi all,

    Vlado I’ve tried you’re examples, worked out the single quotes, inserted everything as instructed, and after being at this for hours now trying all sorts, everything is working aside from the .stream mod. This still sits at 520px. If you have a look at the screenshot here

    http://www.tiikoni.com/tis/view/?id=ec03483

    you can see at the top it is the 520px still, and at the bottom if i edit the width from 520px to 625px it adjusts just fine.

    From looking at the CSS it would seem twitter are creating a string of sorts to make sure this edit cannot work or am I wrong ?

    heres my script from the page, placed inside but under the twitter widget, is this correct? I have also place the the CSS as advised, edited the STYLE tag part in the script and used the twitter embed code as advsied

    http://www.tiikoni.com/tis/view/?id=c3c3696

    Any thoughts would be greatly appreaciated, Thanks

    Reply

  69. Hi Kev

    your widget didn’t change because your java script didn’t import style into iframe. You have to fix also double quote not just single quote. Look at your line: 262 and put exactly those double quotes to your line: 271 -> text/css.

    This JS should change not just stream class in iframe but also timeline class.

    Reply

  71. So after trying diff solutions for 2+ hours i found that using the class of the iframe works, and using the id doesn’t

    CSS:
    .twitter-timeline {
    width:100% !important;
    max-width:none !important;
    }

    JS:
    $(window).on(‘load’, function () {
    $(‘.twitter-timeline’).each(function () {
    var head = $(this).contents().find(‘head’);
    if (head.length) {
    head.append(‘.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }’);
    }
    $(‘.twitter-timeline’).append($(”));
    })
    });

    Reply

    1. This is the version I’m using, based on the contributions above:

      twitterCheck = setInterval(function() {
      if($(‘iframe[id^=”twitter-widget-“]’).length) {
      $(‘iframe[id^=”twitter-widget-“]’).each(function () {
      $(this).contents().find(“.timeline-Widget”).attr(“style”,”max-width:100% !important;”);
      $(this).attr(“style”,”max-width:100% !important; width: 100% !important; height:440px”);
      });
      clearInterval(twitterCheck);
      }
      }, 1000);

      I also set the height – change as required.

      NOTE that when copy-and-pasting from this site single and double quotes are being converted to stylised open and close quotes. You have to clean this up after pasting.

      Reply

      1. Should have said: the code is inside jquery ready(). Use the ‘window on load’ or jquery ready() to run the code at the right time. Even then, the 1 second timeout helps.

        Reply

      2. Thanks! That works. I’ve been using a different method from the comments section here, but it stopped working after the new widget update. The reason I prefered that one over this one is because this one only works most of the time. I have noticed that there is a slight chance that the width is not changed on page load. This will do for now though.

        Reply

        1. The selectors and the layout style just changed. Here’s an example using Vlado’s later script that loads consistently: http://paste2.org/gE2B8XMM

          It fills the whole page and tries to style like the old layout. It’s easy to change anything through the inline style that gets appended.

          Reply

  76. Twitter has made the widget more responsive. You can now change it to any width bigger than 520px without additional code. The modifications posted here are no longer needed. However, these bigger widths trigger a “large display mode” and the font is really big. There is currently no way to change the font size. Hopefully they will tweak it in the future.

    https://twittercommunity.com/t/embedded-timeline-font/64662/2

    Reply

    2. As I mentioned above, their change is meaningless and just a nuisance since this ‘large display mode’ still necessitates the same method as before to change the css within the iframe.

      Here is an updated example of 100% width that restores font size for all display modes: http://pastebin.com/raw/h7BKMHzm

      Reply

  78. Hi,

    I try to change the font size from twitter timelime and I don’t know how to do it. I just use html and CSS. Can anybody help me with that?

    Sorry if my english is not enough good but it’s not my mother tongue. :)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *