Horizontal Gallery Mobile View

Hello!

So I have been struggling with this for a while now and need some help. I’ve managed to post the caption of images over each of the entries in the Horizontal Gallery and change the view for mobile through CSS. The problem I am facing now is that the caption raises to the upper middle of the image when an mobile mode. Would it be possible to adjust the text either through PHP or CSS to accommodate the change to mobile? Ideally the change would occur while resizing so perhaps CSS would be the best option?

Here is the PHP code I have so far. I can’t get the small screen size portion to work properly:

/* Added to add horizontal gallery text on home page */
function horizontal_gallery_subline(){
?>
<script>
(function($){
    $(window).load(function() { 
        $('.av-horizontal-gallery-link').css('bottom', '30px');        
        $('.av-horizontal-gallery-link').each(function(){
            var imgTitle = $(this).attr('title'); 
            $(this).after('<div style=""><p class="text-under-image">' + imgTitle + '</p></div>');
            $(this).css({
                'padding-bottom' : '20px',
                'background-color' : 'transparent',				
            });
			if($(window).height() < 550) 
            $('.text-under-image').css({
				
				"text-align": "center",
				"margin-left": "auto",
				"margin-right": "auto", 
				"width": "290px",
				"color": "rgb(255, 255, 255)",
				"position": "relative",
				"background": "#001a35",
				"opacity": "0.9",
				"top": "-20px", 
				"padding": "10px", 
				"line-height": "130%",				
            });
			else $('.text-under-image').css({
				
				"text-align": "center",
				"margin-left": "auto",
				"margin-right": "auto", 
				"width": "290px",
				"color": "rgb(255, 255, 255)",
				"position": "relative",
				"background": "#001a35",
				"opacity": "0.9",
				"top": "-140px", 
				"padding": "10px", 
				"line-height": "130%",				
            });
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'horizontal_gallery_subline');  

Here is my CSS. The ‘homecarousel’ portion is what I named the CSS class as I have multiple galleries and this one needs specific changes:

/* Add wrap to the text inside of the home page carousel */
.homecarousel .av-horizontal-gallery-inner {
white-space: normal !important; 
}  

/* Settings to fix image placement of home page carousel on mobile */
@media only screen and (max-width: 989px) {
.responsive .av-horizontal-gallery-inner {
    position: static;
    min-height: 500px;    
}
}  

/* NOT WORKING */
/* Settings to fix text placement of home page carousel on mobile */
@media only screen and (max-width: 989px) {
.responsive .av-horizontal-gallery-inner .text-under-image {
top: -20px;
}
}

Any help would be greatly appreciated!