Currently, I am using rems to define the font sizes in my project. However, I have encountered a situation where I need to scale the font sizes at specific breakpoints without affecting the entire page, but just the text within a certain container. I understand that changing the font-size of html will impact all elements on the page. Is there a way to only adjust the size of child elements within a specific container such as .container, rather than specifying individual sizes for each child element? I want to scale the entire container and not assign a size to each individual child.:
CSS
html{
font-size: 13px;
}
p{
font-size:1rem;
}
h1{
font-size:2rem;
}
.container{
font-size:3rem;
}
HTML
<h1>Main title</h1>
<p>Main text</p>
<div class="container">
<h1>Title</h1>
<p>Text</p>
</div>