Variable Font Size for a Single Text Block

Site URL: https://www.sharpeaero.com

Hey all,

How can I use the code block to make a variable text size based on browser width? I'm currently using code blocks for the headings on my homepage because I needed them to be a different colour than the default <h1> defined by my squarespace design settings. However, by using these code blocks, the text no longer resizes for smaller browser widths like squarespace builds in by default in their text blocks.

Here's an example of the code I'm currently using in one of these code blocks:

<h1 style="font-family:Roboto Condensed; text-transform:uppercase; font-size:72px; font-weight:700; letter-spacing:0em; text-align:center; color:hsl(0, 0%, 11%)">
  <left>Buying in Bulk?</left>
</h1>

Website is https://www.sharpeaero.com if you want to see what I mean by text not resizing. The text on the top hero image/video will resize as it still uses the text block, but the rest of the titles/headers are code blocks and don't resize.

Thanks so much for your help!

To clarify, I know how to get responsive text sizing (text size stays proportional to the browser width). But I'm looking for it so that it’s a single break point between two preset font sizes at a specific browser width.

I'm trying to use something like this, I just don't know how to get the CSS code to target the specific code block I'm trying to modify. I have the Block ID found by using a Chrome plugin that shows me, but what's the coding syntax to include it? The ID is #block-yui_3_17_2_1_1590447514494_20134

<style>
  /* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
</style>

You can use these, instead of pixel (px)

font-size: 1rem;

font-size: 1em;

font-size: 1vw;

font-size: 1vh;

font-size: 10%;