How to make text fit full container width

Design help Layout & Design
5

ok @NutsDev I see that you have fixed width of header wrapper and you are trying fit dynamic size of text into fixed max width. this is not how things are done but…

You have some options:

  1. use @container queries and cqw units for font - this is very new CSS enhancement supported with all browsers but not sure about how Webflow will deal with that.
  2. use Javascript to calculate viewport width and internal font size calculation. - is compute heavy and overkill.
  3. use @media query and adjust font size to container manually until will fit - not practical
  4. use calc()

The best option will be If WF supports @container queries. For rest you should reconsider applying fixed width 1760px and trying to fit text inside. Your second option will be to set wrapper to 100vw and use calc() and use media queries.

Good luck

2 Likes