Title and subtitle overflowing beyond poster image block on ipad

Site URL: https://www.twentymv.com/

Hi,

I have a series of 7 poster image blocks with a title and subtitle. My image is a simple colored square so the focus is on the text. The problem is that when the website resizes to ipad width, the text overflows way beyond the image block. It looks all jumbled and impossible to read.

Can this be fixed? 

Seems odd that the image blocks dont hold the ratio as they resize.

I didnt want to use text blocks with a background and border because I want the blocks to be square (and stay square) and the text blocks will resize to whatever ratio, depending on the device the page is viewed on.

See below for the before and after.

If anyone has a solution, I would appreciate it! The password to the site is tmv1234

Thanks!

Hi,

What is password?

Hello Tuan. The password is tmv1234.

Try adding this to Design > Custom CSS > then save & reload the site

@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-62f17038e3e2a5720d4e644e .image-block .image-inset .content-fill.sqs-image-shape-container-element {
    padding-bottom: 200% !important;
}
}

Tuan, you are awesome! Your code resizes the image blocks and keeps the text within its borders when viewed on a tablet. Looks great, thank you so much!!!