Fix overflowing bounding box on slideshow block

I was able to get meta data for my slideshow images - the title and description - to display on mobile devices by using this code (thanks to a fellow forum member for this):

@media screen and (max-width:768px) {
	.sqs-gallery-block-slideshow .meta {
    	display: block !important;
  		overflow: hidden !important;

		/* i added this to keep the text within the contraints of the container */
  		max-width: none !important;
  		height: auto !important;
  		width: auto !important;
 		 min-width: 50%;
  		white-space: normal !important;
	}
	.meta-title {
    	font-size: 20px !Important;
	}
	.meta-description * {
    	font-size: 10px !important;
	}
  	.sqs-gallery-meta-container {
    	display: none;
  	}
}

But I'm running into an issue with the bounding box spilling outside of the image container or the container block. I'm not exactly sure. I would like to contain the text within the image (even expanding the image size). Or cause the text to overflow into ellipsis. I tried using

 text-overflow: ellipsis

to no effect. Maybe I'm using it wrong?

Thanks,

I solved this by editing the design in the edit dialog box. I selected top instead of top center, I think.