Beginner Help - Responsive Text Scaled to Image

Hello,

I have a simple hero page with a logo image and text below it. Now…what I’m struggling to do is to get the text below it to scale in size with the logo. Everything is set to percents, rem, and it is absolute (but I can only make it relative to the body as the parent? not to the logo image …).


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

With no links it’s difficult to picture what you’re trying to achieve.

But I think you probably have a single line of text just below the logo that is part of the branding element itself, and you’re wanting that to scale?

First I’d probably solve the element sizing by putting both in a DIV, and control the width you want on every page there, e.g.

DIV - logo wrapper, flex downwards, do your width sizing here
   IMG - logo 100% width to fill the wrapper
   DIV - text 100% width to fill the wrapper

For the font sizing itself, you can just visually adjust at breakpoints to get “close enough” to the presentation you want.

Or if you want an exact match, you’ll need a JS lib to do the calculations needed to determine the correct font size to use as the logo frame resizes. I have some notes on the textFit lib here, but there are others.