How to make UI Overlay font-size responsive in 8th Wall Studio?

Technical Support
1

Hi team,

I’m using 8th Wall Studio’s UI Overlay. Layout scales nicely for width/height, but font-size doesn’t scale across devices/orientation. On small phones the text feels too big; on large tablets it’s too small. Currently I made my UI fit for Full HD, but if I use 16:10 devices, the font position offset.

Goal: Fluid typography that scales with viewport (and respects safe areas), ideally without manually switching sizes for every breakpoint.

Questions:

  • Is there a recommended pattern for responsive font-size in the Studio UI Overlay?

  • Any official CSS hooks or examples for fluid typography?

  • Does the overlay expose a container we can target with container queries?

2

This isn’t a built-in behavior yet, however we’re looking into it. Your best bet is to query for the window size onTick and adjust the font size accordingly.

1 Like