Streaming live at 10am (PST)

Font doesn’t grow or shrink for different devices


#1

https://preview.webflow.com/preview/tooftv?preview=824d33c83713eb2b1195c46fd0371188 is my shared link.

Am I doing something wrong? I am using the flex box, but it’s not helping with the font size, just placement. Does anyone have tips.


Here is my public share link: LINK
(how to access public share link)


#2

What's your idea behind using % in font-size?


#3

I was hoping it would stay the same everywhere. Basically I want the font to fill up the red rectangle on every device. But it’s not doing that @AntonioBalderas


#4

Maybe this plugin can help you http://fittextjs.com/ also you can learn a little bit about using VH and VW for a responsive typography!


#5

How would I use this within webflow? This plugin I mean, and do you have a some info about using VH and VW?


#6

Hi @Aimanisms here's a little information regarding vw and vh units for font sizes in Webflow: https://webflow.com/blog/how-and-why-to-use-vh-and-vw-in-webflow :smiley:


#7

Hey,

Em would be better for responsive typography i guess ?
You can directly type em when you set your font size

If you want to understand how responsive typography works, Neal O’Grady wrote a nice article about that (take a look at "Get your units rights")


#8

This is a great article and you can find a hosted version here then ad the link in the head of you page and read the docs to learn how to use it.


#9

I tried the em thing @zbrah but it didn’t work. Again, Am I doing something wrong?


#10

@AntonioBalderas thanks for the smashing magazine article, it’s very extensive and asks for calculus. But there is no easy answer for this basically. Because again. I am using flexbox, so sizing is finally right of the boxes. Now I have issues with the font size adjusting to different devices.


#11

I don’t understand most of these things. Cause I am reading it, and trying it out..but it doesn’t solve my problem.


#12

It seems like you have solved it pretty good? :slight_smile: The text is adjusting and never goes out of the box and not getting to small. Whats the problem you think? :slight_smile:


#13

more the difference between vh and vw, when do u use vh?


#14