Best way to make title adjust using flexbox

I am trying to have a headline (Iglesia Fe Unida) shrink down to a smaller size when on small mobile devices. As opposed to just creating smaller duplicate text. Can I do that with flex box? If so how should the container for the headline be setup?

Hi,

Sorry not exactly sure what you want to achieve. That is the standard way to do it. reduce the font size.
Though you can try having that text as an image, that way it will shrink cleaner in smaller devices.

Thanks

So flex box shrinking wont shrink the text
How about using calc in the text fields

Hi again,

You can use Responsive Text feature https://theme.co/apex/forum/t/shortcodes-responsive-text/174 you can see the demo here http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Alternatively you use different techniques to make the font size responsive, please see https://css-tricks.com/books/volume-i/scale-typography-screen-size/ or https://css-tricks.com/snippets/css/fluid-typography/

Hope this helps!

So how can I implement the alternate techniques you listed using the Pro Element CSS…

I thought I could just put something like this in the Element CSS:
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));

That doesn’t work but you get the idea of what I’m trying to do. Or is it better to put something like that in global CSS and then just use a class to implement it?

Hi @clefler,

Element CSS is for CSS, example,

$el {
font-size: calc(14px + ( 10px * 2 ));
} 

Buf it’s about styling like font-size: calc(14px + ( 10px * 2 )); then it should be added directly to the font size, example

Inline CSS field is only applicable to classic elements.

Thanks!

ok thanks, think i got it

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.