title: Text is not responsive on poster image
body: <p>I have issues with my text over my images. The text I have is working when it's in desktop, at least on my computer resolution. But the issue is when I scale it back it doesn't keep up with the images so to say. Any idea how to do so or what is wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-4 text-center image-capsule mx-auto"&gt;
    &lt;section class="posters-section"&gt;
      &lt;a href="/" class="movie-link pop"&gt;
        &lt;p class="poster-date"&gt;Test&lt;/p&gt;
        &lt;img class="img-fluid poster" data-toggle="popover" src="${app.movie[0].poster}"&gt;
      &lt;/a&gt;
    &lt;/section&gt;
    &lt;h5 class="mt-3"&gt;${app.movie[0].title}&lt;/h5&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.image-capsule {
    width: 33%;
    position: relative;
  }
  
  .posters-section {
    position: relative;
  }
  
  .poster {
    position: relative;
  }
  
  .poster-date {
    margin: -5% 26%;
    font-weight: bold;
    z-index: 100;
    background-color: #9c0000;
    position: absolute;
    width: 51%;
    text-align: center;
  }
  </code></pre>