Home>Support>How to make heading responsive for mobile devices?

How to make heading responsive for mobile devices?

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

Link to website: https://zoak.in/

Please check and provide a workable solution.
Thanks in advance.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 1 month, 11 days ago Andrew Misplon Hi, I Work Here

    Hi Zoak

    Thanks for reaching out.

    You’re using an inline style to set your font size:

    <h1 style="text-align: left; margin: 5px; font-size: 300%;">
    

    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 :)

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More