What is the best way to get my text to be responsive to the viewport so it is re-sized smaller and fits better on mobile phones?
I have tried using the vw unit and it works in Firefox and Chrome but doesn’t seem to work in Safari?
Is the fittext Javascript plugin (http://fittextjs.com) best for this? If so how do I implement it in Webflow?
Thanks in advance for any help with this issue.
Hello @rajsidhu.
Could you, please, share Read-only link to your project so we could check the reason of this issue.
Guidance you can find here How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow
Hi @sabanna here is a the link - https://preview.webflow.com/preview/responsive-text?preview=1e2803f01954e9a6ed74207719a8df0d
I want the h1 text to re-size with the viewport.
use the device icons at the top of the screen to change resolution
see video
If you do that… then your dependant on an external / custom script…
when webflow provides that functionality - natively.
@Revolution yeah I understand what your saying.
I tried using the vw units and it works. The text size does adjust to the size of the screen, but the vw units don’t work on Safari. Plus it doesnt quite look right the smaller you go.
So I was thinking about doing it your way and adjust the text manually as you showed in your video.
Just one question about that - Webflow gives you 4 screen sizes at the top. Would you recommend that I adjust the text size by using the screen drag function so as to target more device sizes?
please explain what you mean in more detail
@Revolution when you click a screen size to see how it looks, you can click and drag the side of the web page and resize the viewport manually.
ok. I understand now.
I don’t think the resizers are meant to adjust screen resolution.
They are only meant to display a visual representation of how your screen will appear within certain media queries / resolutions.
The four device icons at the top of the screen adjust the media queries (resolution).
Notice if you select the Vertical Tablet icon - then use the resizers… the bottom center of the screen will display a list of devices compatible with the selected resolution. The selected media query however never changes.
Think about this… if they allowed you to change the top border of an element at 900… and 901, and 902… 950… 960… etc…
you could potentially have 1 value per pixel resolution… for the top border of 1 element.
Needless to say… your css file would contain some weight 
@Revolution yeah that makes sense just wondering how much the extra media quires will actually bloat the code? I’m only planning on adjusting for the major devices.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.