Responsive Testing

HTML

<div class="centered-wrapper">
  <div class="centered">

    <h3><span id="date"></span></h3>
    <h1><span id="song"></span></h1>
    <h2><span id="artist"></span></h2>


    <button class="btn" onclick=' document.getElementById("link").src= "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/188958565&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"; document.getElementById("link").height = "250"; '>
    Load Song </button>
    <br>
    <iframe id='link' frameborder="0" scrolling="no" width="100%" height="0"></iframe>
    <br>


    <p><span id="blog"></span></p>

  </div>
</div>

CSS

* {
  margin: 0;
  padding: 10px;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Josefin Sans';
  text-align: center;
}

p {
  font-size: 18px;
  margin: 0 0 0.5em;
}

.centered-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.centered {
  background: #ccc;
  border-radius: 8px;
  margin: 0 auto;
  padding: 20px;
  width: 85%;
}

/*
Button
*/

.btn {
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: black;
  font-size: 18px;
  background: #ccc;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  outline: none;
}

.btn:hover {
  background: #bbb;
  text-decoration: none;
  }

JavaScript

$(function() {
  jQuery.fn.center = function() {
    this.css("position", "fixed");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
  }

  $('#myDiv').center();
  $(window).resize(function() {
    $('#myDiv').center();
  });
});







document.getElementById('date').innerHTML = '7.23.2016 | Saturday | Day 10';
document.getElementById('song').innerHTML = "Chaos Is A Ladder";
document.getElementById('artist').innerHTML = "Ramin Djawadi";
document.getElementById('blog').innerHTML = "Chaos isn't a pit; chaos is a ladder.<br>The speech accompanying this song was truly phenomenal. I'll be thinking about this one for a long time to come.<br>Still very frustrated with the current state of affairs regarding the website design. How difficult is it to create a centered div? Apparently, the most difficult thing in the world. I'll figure it out eventually.";