Howdy, @dsthompson!
Thanks for writing in! You are correct in your conclusion that while text is responsive in its overall shape and how it reflows, it’s size will always remain consistent. While we do have our Responsive Text feature in the page builder, Pro’s header and footer builders do not currently have anything directly related to how that works, as it is JavaScript based, and we are slightly rethinking how we may want to approach that overall.
For your particular situation, you have some options due to the layout in which you are using your text (inside a fullscreen container with no max width). Here are a couple ideas you can check out:
- Create a new header starting with our “Sticky Bars” template (just to see how this works, you don’t need to assign it anywhere) and inspect the hero text once you enter the template. You will see that the
font-size for this text is calc(12vmin + 18px). There’s a bit going on here, but basically we’re using calc() to combine two non-like CSS units, using a px unit as a foundation and a viewport based unit (vmin in this case) to have our text size increase and decrease dynamically based on the viewport’s dimensions. There is a bit of nuance going on here, and there are plenty of articles available to read up on this subject, but using viewport units on their own can create too much scaling from large to small, so combining them with a set dimension (like our 18px) helps to “round out” the scaling and make it much smoother. Also, in using vmin, this is telling the browser to use whichever dimension of the browser is smallest at any given point while resizing, either horizontal or vertical. Notice how when you resize your browser window both up/down and left/right, the text will always fit very well to the proportions of the screen. Anyway, this is something you can play around with yourself by simply changing the values to see what works best for you.
- The one downside to the approach above is that your text will always be scaling up and down, no matter how large or small the screen viewing your website is. This probably wouldn’t be a problem in your case, as your layout is very similar to the “Sticky Bars” template, but another technique you could explore is the scaling font sizing technique explored by Mike Riethmuller (which we have also implemented as an option in theme settings for your website’s very base level font sizing). It’s much more involved, but essentially is a creative way to include a floor and ceiling for an element’s font size and then scale in between those. It involves a fair amount of custom CSS you’d need to setup on your own, but you could do this in the code editors in Pro or via a child theme, and assign it as a class to your text. The upside here is that you can set the minimum and maximum size you want for your text and scale it across a range you specify, but it is obviously a much more advanced technique to implement, and may be slightly too much for what you’re looking to implement here.
Hopefully that helps to point you in the right direction. Remember that all changes to your theme should either be done in the code editors of the tool, or via a child theme to ensure that your customizations are kept safe when updating the theme in the future. Cheers!
