Responsive text Header

[yingfuli]

Hi,

How can I get text in a Header container to be responsive? I understand that ‘responsiveness’ is not yet possible in Header and Footer which I find rather disturbing for it being such an important feature in modern website building. Please point me to way to accomplish this. This is the site: http://www.wpdept.nl/zzpdoorbraak/

[kory]

@yingfuli,

Keep in mind that “Responsive Text” like the feature used in the content builder is using JavaScript to dynamically set the font size based on the text’s relationship to it’s containing element. This is not a native feature of web design, and is something to be used sparingly due to the constant resizing that is needed. That all being said, there are still many ways to achieve “responsive text” in the header and footer builders, each of which is a slightly different approach:

1. Utilize calc() and Viewport Units – If you load up the Hero or Sticky Bars templates in the header builder, you will see this technique in use. The former utilizes calc(4vw + 1em) as the font-size while the latter utilizes calc(12vmin + 18px). The basic idea here is that you combine a viewport unit along with a fixed unit to achieve text that responds in size based on the size of the screen in general (not the containing element like the “Responsive Text” feature, which is how it is slightly different). Essentially, by combining a viewport unit with a fixed unit, you are able to moderate the scaling effect from being so drastic. For instance, if you just make the font-size of an element 10vw, that can potentially appear very large on larger screens and very small on smaller screens. The mixing of a fixed unit helps to make this ratio much more manageable, and you can play around with alternating between higher/lower values of the viewport units and the fixed units.
2. Utilize rem Units Along with Differing Base Font Sizes – With the latest versions of the theme, in Theme Options under Typography in the Root Font Size section, you can set different root font sizes for each breakpoint of the theme, which allows all text across your website to be responsive. Remember, you are setting the base sizes for your theme overall, so this will affect everything, but starting with larger numbers on desktop and going to smaller values on smaller screens will help the overall responsiveness of typography on your website. Then, you can utilize rem units in the builders to scale text up and down based on the root font-size of the overall theme at each breakpoint.
3. Display Options – If you have text that is very large and simply too expansive for a section on smaller screens, you can also look into hiding the large text at a certain breakpoint and have some copies for smaller screens that utilize a combination of smaller font-size settings as well as different text potentially. This is a common technique utilized in these situations with large amounts of text. For example, you can see this in action on Framer’s website: https://framer.com/features/design/. The heading that starts with “Create responsive designs…” is hidden at a certain breakpoint and replaced by a much smaller sentence starting with “Easily create responsive…”.

Hopefully this helps to point you in the right direction. Cheers!