Menu
In converting from Twitter Bootstrap 2.3.2 to 3.1.1, and after working through several migration guides, I find that all my fonts are too small (around 75% of the 2.3.2 size). This doesn't seem to have anything to do with screen size (assessed on the same screen, 1920x1080). According to the Inspector (both Safari and Firefox), old and new should be the same font-size.
Since this is universal for all fonts, it seems likely that there's some global scaling going on, somewhere not revealed by the Inspector. What could that be? How can I undo it?
Web Inspector example:
BS3 version:
<html>
<body class="me">
<div class="jumbotron home-feature">
<div class="alert alert-info text-center">
<small>
Styles in the inspector:
small: type.less:85: font-size: 85%;
small: normalize.less:159: font-size: 80%; (overridden)
small: User Agent Stylesheet: font-size: smaller;
Inherited from body.me:
.me: me.css: font-size: 1em; (overridden)
body: scaffolding.less:37: font-size: 14px; (overridden)
Inherited from html:
html: scaffolding.less:29: font-size: 62.5% (overridden)
BS2 version:
<html>
<body class="me">
<div class="hero-unit home-feature">
<div class="alert alert-info text-center">
<small>
Styles:
small: bootstrap.css:662: font-size: 85%;
small: User Agent Stylesheet: font-size: smaller;
Inherited from div.hero-unit.home-feature:
.hero-unit: bootstrap.css:6120: font-size:18px (overridden)
Inherited from body.me:
.me: me.css:1: font-size: 1em; (overridden)
body: bootstrap.css:224: font-size: 14px; (overridden)
Inherited from html:
html: bootstrap.css:68: font-size: 100%; (overridden)
531
Well, despite the fact that the Inspector shows it as "overridden" (lined out), the last line in each styling seems to be the key. I added
html {
font-size: 100%; }
to me.css, and sizes now match.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With