title: How do I get my picture captions to be responsive?
body: <p>I am trying to get my captions to be responsive when I resize the screen width.  I am finding that one column of my pictures (the left) has a caption that sticks to it, but the second column's captions do not, and are positioned under the first column's unless I position them specifically (and then they are not responsive).  How do I get my captions to stick to their corresponding pictures, both when resizing, and otherwise?  </p>
  
  <p>I have made the position for the image relative and the figcaption absolute.  I have tried positioning the div that encapsulates the pic and captions, removed floats, etc.  </p>
  
  <p><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>img {
    padding-top: 15px;
    float: left;
    padding-right: 15px;
    position: relative;
  }
  
  #pic2 {
    background-color: #4aaaa5;
    ;
    text-align: center;
    position: absolute;
    top: 297px;
    z-index: 1;
    padding: 15px 110px;
    color: white;
  }
  
  #pic1 {
    background-color: #4aaaa5;
    ;
    text-align: center;
    position: absolute;
    top: 297px;
    z-index: 1;
    padding: 15px 135px;
    color: white;
  }
  
  #pic3 {
    background-color: #4aaaa5;
    ;
    text-align: center;
    position: absolute;
    top: 463px;
    z-index: 1;
    padding: 15px 133px;
    color: white;
  }
  
  #pic4 {
    background-color: #4aaaa5;
    ;
    text-align: center;
    position: absolute;
    top: 463px;
    left: 534px;
    z-index: 1;
    padding: 15px 120px;
    color: white;
  }
  
  #pic5 {
    background-color: #4aaaa5;
    text-align: center;
    position: absolute;
    top: 627px;
    padding: 15px 137.5px;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;h1 class="header1"&gt;Portfolio&lt;/h1&gt;
      &lt;div class="wrapper2"&gt;
  
        &lt;fig&gt;
          &lt;div class="gallery1"&gt;
            &lt;img id="Pic1" src="./assets/images/download.jpg" height="150px" width="33.3%"&gt;
            &lt;figcaption id="pic1"&gt;Island&lt;/figcaption&gt;
        &lt;/fig&gt;
  
        &lt;fig&gt;
          &lt;div class="gallery2"&gt;
            &lt;img id="Pic2" src="./assets/images/d2.jpg" height="150px" width="33.3%"&gt;
            &lt;figcaption id="pic2"&gt;Track &amp; Field&lt;/figcaption&gt;
          &lt;/div&gt;
        &lt;/fig&gt;
  
        &lt;fig&gt;
          &lt;div class="gallery3"&gt;
            &lt;img id="Pic3" src="./assets/images/d3.jpg" height="150px" width="33.3%"&gt;
            &lt;figcaption id="pic3"&gt;Bambi&lt;/figcaption&gt;
          &lt;/div&gt;
        &lt;/fig&gt;
  
        &lt;fig&gt;
          &lt;div class="gallery4"&gt;
            &lt;img id="Pic4" src="./assets/images/d4.jpg" height="150px" width="33.3%"&gt;
            &lt;figcaption id="pic4"&gt;City Scape&lt;/figcaption&gt;
          &lt;/div&gt;
        &lt;/fig&gt;
  
        &lt;fig&gt;
          &lt;div class="gallery5"&gt;
            &lt;img id="Pic5" src="./assets/images/d5.jpg" height="150px" width="33.3%"&gt;
            &lt;figcaption id="pic5"&gt;"Art"&lt;/figcaption&gt;
          &lt;/div&gt;
        &lt;/fig&gt;
  
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>