How to make heading responsive for mobile devices?

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