Issue automatically resizing main title text - html

Question

I am updating a consultancy website that is hosted on Squarespace and I am having sizing issues with the title (it doesn't respond to browser size)
Here is the link to the webpage
If you resize the page you will see the word eCommerce doesn't resize to fit the screen.
I have tried adding in some custom css but its not working well
#media screen
and (min-device-width: 751px)
and (max-device-width: 1110px)
{
#introduction .sqs-block-content h1{
font-size:100px;
}
}
#media screen
and (max-device-width: 750px)
{
#introduction .sqs-block-content h1{
font-size:100px;
}
}
I have since removed the code form the website.
Do you guys have any idea how I can get the main text to resize based on the size of the browser using CSS?

Answer 1

I think you were on the right path, but for some reason decided to use *-device-width instead of just *-width. I'm pretty sure device-width refers to the entire screen size, whereas width will refer to just the browser viewport size. Try this:
#media screen and (min-width: 751px) and (max-width: 1110px)
{
#introduction .sqs-block-content h1{ font-size:100px; }
}
#media screen and (max-width: 750px)
{
#introduction .sqs-block-content h1{ font-size:100px; }
}

Answer 2

For someone, who still has same question, i would recommend to use fittext plugin.
Non-jQuery standalone version also exists
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>