Hi everyone,
I’m trying to add a button to my website but i’m having some troubles while trying to resize it in mobile version.
The button seems fine on desktop, but it’s way too big in mobile.
Is there something i can do?
Website: https://www.greenworkout.it
Hello Vincenzo,
Thanks for writing in! Please do not use px for your button text font size and the button padding. You will need to use em and then in Pro > Theme Options > Typography > Root Font Size, use “Stepped” mode and then adjust the font size in smaller screens. For more details about the root font size characteristics, please check out this documentation:
We would love to know if this has worked for you. Thank you.
I was already using the em setting for both font size and button padding.
Root font size is already set to work in “Stepped” mode.
I don’t really know what to do
Hey Vincenzo,
I believe the following user-created tutorial video about scaling the text of the button (also applicable to any text) might help. Please follow the setup. You just need to type or insert calc(1vw + 14px) to the Font Size field of any text option. You need to adjust 1vw and 14px appropriate for your design. 14px is just like your minimum font size.
The technique shown in the video is called Fluid Typography. You can learn more about that from this 3rd party article: https://www.smashingmagazine.com/2016/05/fluid-typography/
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.