Currently revamping a website loaded with old content. The main change in design is to make the site adaptable to different screen sizes. I am utilizing the font-size in the body element for this purpose and setting all measurements to ems. While this method works well, I encounter issues when dealing with nested elements that also have font-size specified. For instance, when there's a span tag within a p tag with a class containing a font-size property, the font-size ends up being inherited and applied twice. How should I address this issue? This problem frequently arises with links, lists, and styles involving bold text.
The rationale behind setting the body to 1em is to be able to detect screen resolution and adjust the font-size value to make the overall design scale proportionally. All design elements have been converted from pixels to ems.
For an informative example, check out:
I believe the only solution is to edit existing posts, updating the styles to new ones while taking these factors into account. Given the large number of posts, I'm truly hoping there might be a simpler approach I'm overlooking.
This serves as a basic example. Any suggestions?
<style type="text/css">
html {
font-size:100%;
}
body {
font-size:1em;
}
.smalltext, ul, a {
font-family: "Century Gothic", Arial, sans-serif;
font-size: .75em;
}
.boldNavy {
font-family: "Century Gothic", Arial, sans-serif;
font-size: .75em;
font-weight:bold;
color:navy;
}
</style>
<div>
<p class="boldNavy">Showing bold text as intended.</p>
<p><a href="#">Link appearing as intended</a></p>
<p class="smalltext">Text displaying correctly, observe what happens with nested tags.</p>
<p class="smalltext"><span class="boldNavy">Bold text appears smaller here due to inheriting the font-size from the p tag.</span> Regular text follows <a href="#">along with a link</a>. Paragraph continues...</p>
<ul>
<li><span class="boldNavy">Bullet List 1</span><br />
This is the description and <a href="#">a link</a></li>
<li><span class="boldNavy">Bullet List 2</span><br />
This is the description and <a href="#">a link</a></li>
</ul>
</div>