title: How Can I Replace 100% Width in the New Twitter Widget Using CSS code?
body: <p>I currently have several Ruby on Rails applications where I use responsive web design via media queries. I used the following CSS code that overrode the width to 100%. </p>
  
  <pre><code>#twitter-widget-0, #twitter-widget-1 {
  
    float: none; 
    width: 100% !important;   
    font-size: 12px;
  
  }
  </code></pre>
  
  <p>However I noticed in July 2015 that the Twitter widgets no longer display at 100% but a fixed size. I checked the developer website of Twitter and saw that the customization of Twitter widgets has been expanded. When I inspect the widget I see the CSS parameters that I have in my CSS but I also see a width set to 520px.</p>
  
  <p><a href="https://dev.twitter.com/web/embedded-timelines" rel="nofollow noreferrer">https://dev.twitter.com/web/embedded-timelines</a></p>
  
  <p>Looking at this link I know I can code the parameters right in the code with a fixed width. Not knowing the size of the screens that anyone may use to display my web applications I'm reluctant to set a fixed size anywhere. Another issue is that will not change it in my media queries.</p>
  
  <p>The only link that I have found about customizing the current Twitter widget is the one below. Most of them are from 2011-2013.</p>
  
  <p><a href="https://stackoverflow.com/questions/31048815/twitter-embedded-timeline-100-width">Twitter embedded timeline 100% width</a></p>
  
  <p>The question is asked by someone using the Twitter widget in Wordpress. The solution used jQuery. I am not adept enough in Javascript to implement a Javascript or jQuery solution so I do not know if it would work for me.</p>
  
  <p><strong>UPDATED 7/16/2015 1100 GMT-5</strong></p>
  
  <p>I decided to do another search this morning and found this <a href="https://www.geekgoddess.com/change-twitter-widget-to-wider-than-520px/#comment-279" rel="nofollow noreferrer" title="link">link</a> with three recent jQuery solutions that the people said they got to work. </p>
  
  <p>I added the following line in <code>application.html.erb</code> to correct a ReferenceError for $. I though the jquery-rails gem would recognize my code.</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have created a <a href="http://jsfiddle.net/lightbe/v7xom6ms/" rel="nofollow noreferrer">fiddle</a>. When I clicked JSHint and it said that my code was perfectly valid. The widget appears with a width of 552px. I'm not sure if the problem is where I have the code. I need help to determine why my jQuery code is not accomplishing my goal.</p>
  
  <p>Here is the iframe statement when I inspect the Twitter widget:</p>
  
  <pre><code>&lt;iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; margin: 0px; padding: 0px; display: inline-block; position: static; visibility: visible; width: 520px;" title="Twitter Timeline" height="400"&gt;
  .......widget statements.............
  &lt;/iframe&gt;
  </code></pre>