Hi,
I am facing trouble while opening my site in mobile, as the home page headline is not responsive due to which the text is not readable in mobile devices.
Here is the link to the screenshot:
Link to website: https://zoak.in/
Please check and provide a workable solution.
Thanks in advance.
Hi Zoak
Thanks for reaching out.
You’re using an inline style to set your font size:
In this case, it would be up to you to handle responsive sizing as the font size is set inline. If you’d like a more automated solution you could try the SiteOrigin Headline widget which has the option of using FitText.
If you’d like to adapt your method you’d need to apply a class name to the widget or row using the Attributes section on the right. Then, in Custom CSS you’d target the class name with media queries.
.my-custom-text h1 { font-size: 30px;}@media (max-width: 768px) { .my-custom-text h1 { font-size: 15px; }}Our free support scope is limited to basic usage and troubleshooting. We’re able to assist directly with small Custom CSS changes within our premium support scope. For a little help with making Custom CSS changes, please, see our recent blog post on the topic.
Post: A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes
And for a little help with media queries:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Hopefully, one of the above ideas is helpful :)