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 trialMike Bronner
16,395 Points[Note] Bootstrap May Reset Your Base Font-Size
Anyone using Bootstrap themes may notice that the font sizes are way too small when going through this excersize. The problem here is that Bootstrap may reset the font-size using the following CSS:
html { font-size: 62.5%; }
To "re-reset" the font-size to the desired behavior, add the following above the body styling in YOUR CSS file (which you include after the Bootstrap CSS file, of course):
html { font-size: 100%; }
After that, everything works as described in the video. I didn't notice this at first, as I was following along using a Bootstrap project I am working on, and it threw me for a little loop, until I noticed that Bootstrap is changing the defaults.
2 Answers
Mike Bronner
16,395 PointsHi Muhammad: another update. I just created a brand new project with only Bootstrap 3.2.x, and it does have the following declarations in bootstrap.min.css:
html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}
So it looks like Bootstrap is resetting the fonts after all.
Muhammad Mohsen
Courses Plus Student 10,843 PointsJust wondering, Where did that 62.5% came from?
in bootstrap.css
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Mike Bronner
16,395 PointsThis may have been on a previous version (3.1.x?) of Bootstrap, I'm not in front of my comp at the moment but will check it out as soon as I get back.
Update: thanks for having me double-check this, Muhammad. It appears to be a setting from older Bootswatch themes. Forgot that I had that running on top of Bootstrap as well. :) Will update my original post to reflect that.
Mattox Shuler
Treehouse Guest TeacherThe 62.5% number came from changing the default font-size from of 1em = 16px to 10px (16 x 0.625 = 10). to create easier math with ems and rems. So 1em would now equal 10px, 1.7em would 17px and so forth. I chose not to highlight this method in the course as media query widths (for example @media (max-width: 100em) ) ignore this, and reset back to the 16px default on some browsers. It just seemed like the method was more work that it was worth.
Mike Bronner
16,395 PointsThanks for the insights, Mattox! That makes sense. And as you note, it seems much easier just to work off the given browser size of 16px and apply that consistently.
Mattox Shuler
Treehouse Guest TeacherMattox Shuler
Treehouse Guest TeacherYeah, I would recommending removing that code from Bootstrap or changing it like you mentioned to a simple declaration of font-size: 100% for responsive and accessibility purposes.