Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 PointsFont resizing dynamically according to parent and its value
I've got a div that displays an amount and static title. See here for image.
The red amount is a value that can change dynamically depending on the user's data. The "outstanding expenses" does not change but stay in it's position.
My question: <strong> Is there a way to dynamically resize the red value so that it's constrained with its parent div and whatever amount it happens to be?</strong> In other words, if it were a large number or small number it would respect its margins on the left and right?
I've tried setting the amount's font-size according to vw (via this CSSTrick's post), but that doesn't solve the more difficult problem of resizing the font size based upon the amount's value.
Is a solution possible with just CSS?
2 Answers
Casey Ydenberg
15,622 PointsThere is no possible solution with just CSS.
There may a solution that uses JavaScript but if you go this road make sure that it is an enhancement - ie works OK if JS is off or doesn't load.
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 PointsI figured that was the case.
I'm not opposed to using JS. I just don't know enough to solve this problem.
Any pointers would be a great help. I think this is easy enough to try to figure out on my own.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsIf I understand it right, if there was one less digit in that number, you'd want the font-size to increase so that it takes up the same width?
I'd have to agree with Casey that there wouldn't be a pure css solution. I'm not aware of any way to size a font based on content.
Are you against a js solution? It seems that you already have js involved if this value is changing dynamically.
I think Casey's suggestion is a good one. Make it right aligned and at a fixed size in the css for the basic experience and then enhance it to what you want with js.
Another thing to consider is whether or not it will be irritating for users to see this number increase and decrease in size. I'm not sure how often the value is changing though. I don't know how small this number can get but if it's only a few digits then it's going to have to be an awfully big font-size to match the width which will add a lot of height too.
Let us know if you want help with a js solution