Custom text Over Image and Responsive

Custom Text over Image - Make is responsive for smaller screens

by tjbaezid

HTML

<div class="textoverimage">
  <img class="img-reponsive" src="http://cdn.shopify.com/s/files/1/0258/1101/t/2/assets/slideshow_3.jpg?5808719635421587686" alt="xxxx">
  <p class="title"> TEXT </p>
</div>

CSS

.img-reponsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.textoverimage {
  position: relative;
}

p.title {
  position: absolute;
  top: 75px;
  left: 0;
  text-align: center;
  font-size: 38px;
  width: 100%;
  color: #fff
}

@media only screen and (max-width: 767px) {
  p.title {
    font-size: 1.5em;
    line-height: 1.5em;
  }
}

@media only screen and (max-width: 479px) {
  p.title {
    font-size: 1.1em;
    line-height: 1.1em;
  }
}