Text overlay on image carousel doesn't adapt to mobile layout

I Need Help
1

I am using an image carousel on our homepage with a Header 1 text overlay on that. When viewed on a mobile device, the font size of that text overlay does not resize and it gets cropped, because the font size is too large for the resized image carousel on mobile.

Does anyone have a workaround for this?

2

Did you ever find a solution? I’m having the same problem.

Also, I’m new to Blocs and generally an amateur at web design.

3

Create a mobile-only carousel and use a smaller font.

1 Like
5

I would create a custom class and scale the text based on the view port width.
for example:

.myText {
font-size: 10vw;
}