Font scaling based on width of container
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.
If the container is the body, what you are looking for is Viewport-percentage lengths:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.
The values are:
vw
(% of the viewport width)vh
(% of the viewport height)vi
(1% of the viewport size in the direction of the root element's inline axis)vb
(1% of the viewport size in the direction of the root element's block axis)vmin
(the smaller ofvw
orvh
)vmax
(the larger orvw
orvh
)
1 v* is equal to 1% of the initial containing block.
Using it looks like this:
p {
font-size: 4vw;
}
As you can see, when the viewport width increases, so do the font-size
, without needing to use media queries.
These values are a sizing unit, just like px
or em
, so they can be used to size other elements as well, such as width, margin, or padding.
Browser support is pretty good, but you'll likely need a fallback, such as:
p {
font-size: 16px;
font-size: 4vw;
}
Check out the support statistics: http://caniuse.com/#feat=viewport-units.
Also, check out CSS-Tricks for a broader look: Viewport Sized Typography
Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography
And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu
Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS
How to change font size of all child elements within a parent div element
You can use em
unit in css for this use case dynamically using javascript.
Relative length units specify a length relative to another length property.
em is Relative to the font-size of the element (2em means 2 times the size of the current font)
p { font-size: 16px; line-height: 2em;}
div { font-size: 30px; border: 1px solid black;}
span { font-size: 0.5em;}
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p><p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p><p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p><div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>
Change font-size without affecting div parent height
The tileText is actually the container in which you've got your text. so add the max-height: 5rem;
to .tileText{}
and Voila! problem solved:
.tileText {
...
...
max-height: 5rem;
}
or you can specify the .tileText
height in another unit like rem rather than percentages.
.tileText {
...
...
height: 10rem;
}
Related Topics
Change Svg Viewbox Size with CSS
Combining Multiple CSS Animations into One Overall Animation
How to Customize Style of Bootstrap $Modal
Multiple Classes Inside :Not()
Font-Awesome Error 404 on Fonts
Rounded Tables in Twitter Bootstrap 3
CSS Is Not Working in My Angular Component
Re-Color Tooltip in Bootstrap 4
Full Body Background with Twitter Bootstrap
Styling Qml Without Manually Marking Each Property to Be Styled
How to Visually Indicate Current Page in ASP.NET MVC
Bootstrap Fluid Layout - Fixed Width of Sidebar
How Did CSS 'Content' Property Work for 'Img' Element in Webkit
Side-By-Side List Items as Icons Within a Div (Css)