Making Player and border responsive and proportionate


I’m a newbie here and to coding. I have a custom border that I created that goes around content on my website (which can be found here. I have a soundcloud player that I have inside the border. At first, I was satisfied until I realized the player wasn’t responsive anymore. I changed the height and width of the player to auto and it fixed the responsive issue. However, now the player doesn’t fit inside the border at all, and it stretches both the border and the player.

Here is the HTML where everything fits but its not responsive.

<div class="frame_outer" style="padding: 18px; width: 600px; height: 300px; text-align: center;"><iframe src=";color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"></iframe></div>

Here is the CSS:
.frame_outer iframe{
  padding: 50px 49px;
    background: url(;
    background-size: 100% 100%;

Any help would be greatly appreciated. thank you

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


thank you! I was looking for a way to do that just now lol.

Hav a look here.