Leave image with responsive text

Question

Hello,

I need to insert a text on top of an image, which is responsive in the correct place of the image, until then it is working "well", but the site is done in bootstrap, and when it comes out of col-Md-4 and goes to the size col-Xs-12 (when resizes the window). From there the text becomes too small.

What I want is that the text adapts to the image, just as the image adapts to the resizing of the window.

Follow jsfiddle with example: https://jsfiddle.net/xuavhmg7/2/

The code I took from this site: http://alt-web.com/TUTORIALS/? id=responsive_text_overlays

Edited: David Samm helped me a lot.

Jsfidlle Updated: https://jsfiddle.net/xuavhmg7/3/

He got a delay when he switched, but acceptable. Maybe if I put 'Else if' for all ['Xs','Sm','Md','lg'] with different font-size values it will smooth the switch.

I added this script to catch the breakpoint of bootstrap3.

  <script src="https://rawgit.com/maciej-gurban/responsive-bootstrap-toolkit/master/dist/bootstrap-toolkit.min.js"></script>

And I did that function to change the values.

  <script type="text/javascript">
    (function($, document, window, viewport){
      function setTextSize() {
        if ((viewport.current() == 'xs') || (viewport.current() == 'sm')) {
          $("figure.overlay figcaption").css('font-size','7.0vw');
        } else {
          $("figure.overlay figcaption").css('font-size','2.4vw');
        }
      }

      // Executes once whole document has been loaded
      $(document).ready(function() {
        console.log('Current breakpoint:', viewport.current());
        setTextSize();
      });

      $(window).resize(
        viewport.changed(function(){
          console.log('Current breakpoint:', viewport.current());
          setTextSize();
        })
      );
    })(jQuery, document, window, ResponsiveBootstrapToolkit);

  </script>

Answer 1

I know almost nothing about Bootstrap, but I know a feature in jQuery that will force the size of the font in question. Add the code below on your page:

<script>
$(window).on('load resize',function(){
    if($(window).width() < 992){
        $("figure.overlay figcaption").css('font-size','7.3vw');
    }else{
        $("figure.overlay figcaption").css('font-size','2.0vw');    
    }
});
</script>