title: Responsive Content stretched
body: <p>I had an issue with turning a SoundCloud player and border responsive for mobile devices. I put the height and width to auto and fixed the responsive, but not the player doesn't fit into the border. It also stretches when on the desktop.            </p>
  
  <p>This is the HTML and CSS I have that makes it responsive, but the border and player don't fit.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.frame_outer iframe{
    padding: 50px 49px;
      background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png);
      background-size: 100% 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;"&gt;&lt;iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&amp;amp;color=ff5500&amp;amp;auto_play=false&amp;amp;hide_related=false&amp;amp;show_comments=true&amp;amp;show_user=true&amp;amp;show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"&gt;&lt;/iframe&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm assuming its something with my Css thats throwing it off. Any help or a guide in the right direction would be greatly appreciated. </p>