Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Variable Font Size for a Single Text Block


SharpeAero

Question

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!

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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.

Link to post
  • 0

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>

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...