Menu
I've spent a lot of time working with Foundation and less time working with Bootstrap. I'm having an issue with responsiveness in Bootstrap that I don't understand because this just seems to work in Foundation. The issue is that, while the grid responsiveness works as expected, my fonts are getting scaled so tiny that it is almost illegible on mobile. Notice in my example below that I set the font size to 14px, but on mobile this is becoming very tiny. You can see this by clicking on the mobile button in the Chrome dev tools.
The html to reproduce this is very simple, here is a jsbin: http://jsbin.com/lumepumufu/1/
And here's the html:
<html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body style="font-size:14px"> <div class="container"> <div class="row"> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> </div> </div> </body> </html> 
898
Use the . lead class in Bootstrap to increase the font size of a paragraph.
Size # In general, the rule of thumb is that font size needs to be 16 pixels for mobile websites. Anything smaller than that could compromise readability for visually impaired readers. Anything too much larger could also make reading more difficult.
There are no dedicated mixins for typography, but Bootstrap does use Responsive Font Sizing (RFS).
Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
To ensure proper rendering and touch zooming, add the viewport meta tag to your head
<meta name="viewport" content="width=device-width, initial-scale=1"> 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
