I’m currently working on a project and I’m facing an issue with making text span the full width of its container while ensuring it remains large and both words fit within the container width.
Here’s what I’m trying to achieve:
I have a container with a max-width of 1760px and width set to 100%.
Inside this container, I have a text “LEO MARSHALL”.
I want this text to be large and span the full width of the container while ensuring both words (“LEO” and “MARSHALL”) fit within the container width.
I’ve tried adjusting the font-size using ‘vw’, but it’s not working as expected. The issue arises because it ignores the max-width of 1760px and is relative to the page width rather than the container width.
Could someone please guide me on how to achieve this effect in Webflow? Any help or suggestions would be greatly appreciated!
Thank you for your answer, but it’s not exactly what I meant. I need the text to behave as if it has a font-size in ‘vw’ but not break out of the container and take full available space inside text block.
As you can see on the screen, if I set the font-size in ‘vw’, the text is too long on a 3000px screen width.
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:
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.
use Javascript to calculate viewport width and internal font size calculation. - is compute heavy and overkill.
use @media query and adjust font size to container manually until will fit - not practical
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.
@Stan Thank you so much! I really appreciate you taking the time to share your knowledge and provide solutions.
I’ve done some additional research based on your recommendations and wanted to compile all the solutions for reference:
@container and cqw
/* Define @container query */
@container (min-width: 320px) and (max-width: 1200px) {
/* Use cqw unit for font size */
.container-fluid-text {
font-size: 1.2cqw; /* Adjust the value as needed */
}
}
JavaScript code
// JavaScript to calculate fluid container width and adjust font size dynamically
window.addEventListener('resize', function() {
var containerWidth = document.querySelector('.fluid-container').offsetWidth;
var fontSize = containerWidth * 0.05; // Adjust the multiplier as needed
document.querySelector('.dynamic-text').style.fontSize = fontSize + 'px';
});
@media query
/* Base font size */
.fluid-text {
font-size: 16px; /* Adjust the base font size as needed */
}
/* Media queries for fluid text */
@media screen and (min-width: 320px) and (max-width: 1200px) {
.fluid-text {
font-size: 1.2vw; /* Adjust the scaling factor as needed */
}
}
/* Additional media queries as needed */
@media screen and (min-width: 1201px) {
.fluid-text {
font-size: 22px; /* Adjust the font size for larger screens */
}
}
calc()
/* Base font size */
.fluid-text {
font-size: 16px; /* Adjust the base font size as needed */
}
/* Fluid text size based on fluid container width */
.fluid-container {
width: 100%; /* Or adjust the width of the container as needed */
}
/* Fluid text size calculation */
.fluid-text {
font-size: calc(16px + 0.5vw); /* Adjust the scaling factor as needed */
}
clamp()
/* Fluid text size using clamp() with vw */
.fluid-text {
font-size: clamp(16px, 1vw, 24px); /* Adjust the range as needed */
}
VW and add breakpoint in Webflow (works best for me)
Just set font-size 15vw and added breakpoint on 1920px with font-size 120px. Or:
.fluid-text {
font-size: 5vw; /* Adjust the value as needed */
}
@media screen and (min-width: 1920px) {
.fluid-text {
font-size: 120px; /* Adjust the font size for viewport widths >= 1920px */
}
}
I’m not sure about your statement as he is using resize listener that is triggered everytime when screen change by 1px. More elements using this function will multiply computation. See my response using JS. IMHO this is the last solution I will use if I have to but in real word I will not use it at all as there are better and more efficient ways how to .
As he mentioned using chat-GPT to put this script together I have doubt that he is aware what he has created.
EDIT: here is some reasoning about resize but there is more articles related to this problematic.
the most important are first two sentences
This issue occurs because the browser is conducting multiple reflows on the page during the resize operation.
On window resize, the browser conducts a full reflow and repaint of the DOM. Reflow is a very expensive process, particularly for a large number of nodes.
with one or two nodes (elements) it can be fine but like I have mentioned there are better ways.
I just stumbled on this old post. I faced a similar issue that I wanted to solve with “vanilla” code (no framework). I ended up inserting the text in an <svg> element, and then setting the viewBox attribute of the <svg> element to the bounding box of the <svg> element contents.
