Hey there 
i’m new to webflow and suck big time in anything code-related.
working on my website and got the home page working but
my hero text is not scaling right on mobile
am i supposed to do adjustments on every movile view or am i doing something wrong…?
https://webflow.com/design/mordi-levi?preview=975a0e38c15bf015e503dabfc0708450
any other comments will be more than welcome thanks!
Hi!
Basically the styles cascade from larger screen to smaller (Desktop First Approach). So, whatever style you set on desktop/default will automatically be applied to all smaller screen sizes. When you set styles for say Tablet, these will also cascade down to mobile-landscape and mobile-portrait, but they will not cascade upward to desktop (hence cascade).
So, the best approach would be to set styles from largest-to-smallest…typically (in desktop first approach) most style rules are applied at desktop/default and further tweaks are applied as you move to smaller sizes. This allows for the least amount of rules to be written theoretically.
Aside: there is also the mobile-first approach in while mobile styles are set as default and further style is added on larger screen sizes. This is (i think) even more efficient in terms of amount of code written…These concepts are well-documented all over the web if you want to learn more! Hope this helped.
Hi @Mark_Suarez
Thank for the answer!
this is very theoretical, i was looking for a technical solution for doing it on webflow,
I’m pretty sure i’m not doing something right and there’s a quick solution for it…
I tried setting the height and width of the text to %, that way it is supposed to scale down on mobile…?
Thanks for your time guys!
Hi @Mordi_Levi, thanks for the update. Webflow does not use Vertical Width in our css settings panel at the moment, so if you want to resize your h1 texts dynamically, you need to override your CSS styles in the HEAD panel of your Custom Code section, and add some style override, if you want text to resize dynamically:
h1 { font-size: 5vw!important; }If you do not use vertical width overrides, then what you need to do, is to adjust your H1 headers at each viewport (Desktop, Tablet Portrait, Phone Landscape, Phone Portrait) and adjust your font size settings at each viewport.
I hope that gives you some avenue to pursue, Please let us know if you have any other questions ! Cheers.
this is great @cyberdave! thank you very much!
i’m just lazy, i’ll need to go over the whole site anyways in every viewport to make sure everything is right
Dave, this screencast is no longer available, is there a way you can make it available or LIVE again. I believe there to be some great content that will help me in what you have put together, thank
@clickryan, thanks for your message. I will go check on that video, to see what is up, but if I need, I will just make another short video and post it up Cheers ! Dave