How to Set Font Styling for Mobile, Tablet, & Desktop with the Builder Responsive Styling
In our second instalment of our tutorial series on responsive styling, we will showcase how to set specific fonts for mobile tablet, and desktop. By default, all paragraph and heading font styling are responsive across resolutions. This means that when you resize your browser it’ll shrink automatically to ensure your font fits the resolution you’re viewing it in.
But now with the responsive styling feature, you’re given more freedom to customize exactly how your font will look when viewed on mobile or tablet mode. To change your font styling across your devices, click the top left icons for tablet or mobile view and click each text box to adjust the font using the styling panel on the right.
Please feel free to leave us a comment if you have questions or suggestions on the next tutorial you would like to see! For more Themify tutorial videos, check out our YouTube channel and subscribe.
Also, if you haven’t already don’t forget to check out the first Responsive Styling tutorial in the series showcasing Column Direction!
January 29, 2018 @ 3:18 pm
Not very clear – and stop the annoying background music.
How does this work in backend mode?
So why not teach the whole thing?
January 30, 2018 @ 4:40 pm
For responsive styling, we don’t recommend doing this on the backend because it doesn’t have live preview. However, if you’d like we can provide you more instructions on how to do this via email. Please contact us here – https://themify.me/contact. Thank you for your patience.
January 29, 2018 @ 6:37 pm
Please upload some more tutorial of making fonts as your video game me a lot of information.Thanks for this.
April 17, 2018 @ 7:08 am
Yes please upload some more tutorials for more advanced features. It is a great video. Thank you.
February 2, 2018 @ 4:09 pm
I thought it was very clear and good. Thanks!
February 2, 2018 @ 4:25 pm
I think those short tutorial are very helpfull. Well done – thanks!
But it would be a little bit better without the music.
One reason is: Not everyone likes this “elevator music”
and second:
It is really anoying when I want to view parts or the whole video more than one time.
Hope you bring more helpful clips like this one.
February 6, 2018 @ 4:53 pm
Noted. We’ll look into removing the audio or making the audio tracks a little more subtle. Thank you for your feedback :)
February 7, 2018 @ 5:24 am
Nice..! I apply my project. But it’s not successfully done it. Please guide me or upload video tutorials. So I can easily understand and I apply it.
February 7, 2018 @ 6:57 pm
Hello,
Please contact us here – https://themify.me/contact with more detail with your issue so that I can better provide you support.
Thank you for your patience.
February 25, 2018 @ 1:55 pm
You can create your site in desktop and then make it work with mobile.
But how to do when I want to start with mobile version as priority 1?
Hope you understand my question.
/Bengt
February 27, 2018 @ 4:35 pm
Not quite sure what you mean. Do you mind providing more detail about your query via email here – https://themify.me/contact ? This will allow us to better provide you support.
April 2, 2018 @ 2:54 pm
Thank you so much, I didnt know it was that simple
June 5, 2018 @ 1:38 pm
Hello! Thank you for such great content! Would it be possible to fully customize the font of the Menu elements? For example I am trying to change the font of my menu and logo to Montserrat LOWERCASE but sadly it only shows Uppercase letters for menu elements and lowercase for logo. Is it possible that this feature doesn’t work? ( in the Header font tab in the front end the option for a lowercase font is accessible but sadly the font does not change). Thank you for your time and answer.
June 5, 2018 @ 5:43 pm
This is definitely possible. Please allow us to help you with this. Do you mind sending us your site URL and email us directly here – https://themify.me/contact ? Thank you for your patience.
July 11, 2018 @ 9:13 am
Hello the team,
Here we are discussing only about styling. It’s possible that module content changes according to deskop, mobile, tablet screen ? For example, the photos are not the same on mobile or tablet.
You implemented the hide on … Does it exist a way to add a module on a specific screen without touching the 2 others ?
Thanks
July 16, 2018 @ 5:57 pm
You can use the visibility option to show/hide modules and rows. To access visibility: edit a row or module, then click on “Visibility” tab.
November 30, 2018 @ 11:23 am
If I click the text box while in preview and mobile/tablet, there is no pop up editing window. I’ve tried different browsers without success. Please advise.
November 30, 2018 @ 9:44 pm
Hi there,
Would love to help you out if you could please send us the details, your User ID, and site URL to us using our contact form: https://themify.me/contact
December 3, 2018 @ 9:21 am
Thank you Cecilia, I’ve sent the message just now.
July 12, 2019 @ 3:24 pm
Hi,
If there a way where we can change all the font size on Mobile at once?
Instead of individually doing it?
July 12, 2019 @ 4:11 pm
Hi Sharan,
If you mean to change all font-sizes to be the same, then it is possible with Custom CSS, or if you mean to change the font-sizes accordingly, then you can use Customizer Responsive Styling: https://cl.ly/a5a8070d63c7 to change the main font-size in Body => Body Font, so then if in Builder you are using em or % sizes instead of px you can change the font-size of the body in mobile, so it will change all at once.
Example: if Body Font size is 16px, then 1em = 16px, 100% = 16px, if on mobile you set the Body Font to 14px then all 1em and 100% font-size will be 14px.
I hope this helps.
October 1, 2019 @ 2:46 pm
Hi guys. Did somebody can help me please. I put a feature image on my home page and it works perfectly on desktop. However, when I browse my website using my phone the picture we broken and not fully showed the image. My website is http://www.pandalungan.com. How can I fix this issue? thanks for your help guys
October 3, 2019 @ 9:24 pm
Hi Jose,
If you mean this image: https://cl.ly/08a9a06c51bf it is a background-image, so it won’t show completely on all devices, it will get cropped from sides to cover the section it is set as background-image for, if you would like to show the full image, please don’t set it as background-image, please use an Image Module in a Full Width Row for example to show a full0-width image that is responsive ( showing the full image on all devices ).
November 18, 2019 @ 2:42 am
I try it several time. Can you please explain specifically this words
“Image Module in a Full Width Row for example to show a full0-width image that is responsive ( showing the full image on all devices ).”
November 18, 2019 @ 7:40 pm
Hi Jose,
In Themify Builder, please add an Image Module to a full-width Row, please watch this screen recording to see how to do it: https://share.getcloudapp.com/OAuxek5p this way you can add a responsive image that won’t be cut from sides.
Hope this helps.
November 17, 2019 @ 5:37 pm
Hello, my website is http://www.mynomadiclifestyle.com I am trying to make my website mobile friendly, but it is not happening. Have a look at this page for an example. http://mynomadiclifestyle.com/write-with-my-nomadic-lifestyle/
On the preview option while editing it looks fine, but when i load the page in my device, it is all messed up. The logo photograph on the top is never in line. Please help me in optimising this website with mobile phone.
November 18, 2019 @ 1:03 am
It looks like you are not using the latest version. Please update the theme to the latest version first. If the problem persists, please send us some screenshots as we don’t see anything wrong visually on your site.
February 10, 2020 @ 4:21 pm
Hi Nick!
I have wrote an email to you to [email protected]
I was member Themify, and I develop some websites with Themify. 95% of time I have no problems and that is very good. Thank you for your work and creativity.
I have a problem. I see that can not play the video on smartphone.
Ex. https://www.postulcuapa.ro/alchimia-personala/
I have put a image as background for the people who can not see video.
I want to be beck to Themify LIFE client and Member but I need to find out how do you will fix this problem with the video playing on the smartphones and tablets in the same way as on desktop.
Best regards
Vasile
February 12, 2020 @ 1:21 am
Thanks for the compliment. We can help you with the issue. Do you mind to post it on our support forum: https://themify.me/forum. Our blog comments and support are managed separately.