ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.89k forks source link

amp-fit-text issues and can't find answers #16244

Closed 88kbbq closed 6 years ago

88kbbq commented 6 years ago

Can't find the answer anywhere. Why can't amp-fit-text support both max and min font size in one instance? Our design requires a max and min font-size for a responsive site, but either min is too big on small screens or max is too small on small screen size. What's the solution to this?

aghassemi commented 6 years ago

@88kbbq specifying both min and max font size on amp-fi-text is supported and seems to work as expected based on my tests. Do you have a Url to where it is not working properly?

You can also use media attribute on amp-fit-text to have multiple instances for each of your breakpoints if that works better for your case.

88kbbq commented 6 years ago

Here's the test URL https://website-1b14f.firebaseapp.com. Getting help is a bit slow due to the time difference, so I ended up creating a wrapper and setting a max-width, and then I set amp-fit-text to fixed-height. Not the most elegant fix but it keeps text where I want it on my set screen sizes. ideally, you should be able to do this, but Chrome stalls and then crashes on page load (localhost):

<div class="splash-subtext texture white">
                    <amp-fit-text
            height="68px"
            layout="fixed-height"
                         min-font-size="28px"
            max-font-size="48px">
                {{ page.catering_desc | upcase }}
        </amp-fit-text>
</div>
88kbbq commented 6 years ago

Using Jekyll