Currently, I am working on a website that needs to be fully functional on both mobile devices and computers. I have successfully implemented Bootstrap-responsive to make many elements work, but now I am focusing on the hero-unit for the homepage. Specifically, I would like the page header to automatically scale based on the size of the screen. The main Bootstrap site (http://twitter.github.com/bootstrap/) showcases a similar effect on their homepage header, which is exactly what I am trying to achieve. Any assistance on how to accomplish this would be greatly appreciated.
Here is the relevant code snippet:
<div class="container">
<div class="hero-unit">
<div class="page-header">
<h1>Page Header</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu dolor, dictum scelerisque gravida nec, vulputate in odio. Pellentesque sagittis ipsum et mauris elementum vitae molestie ipsum blandit. Mauris tempus hendrerit arcu, sed vestibulum justo tempor a. Praesent sit amet odio ligula. Morbi sit amet leo vestibulum neque bibendum ullamcorper sed ut ante. Vestibulum id diam quis ipsum aliquet vestibulum. Donec vulputate auctor pharetra.</p>
<a href="#" class="btn btn-large btn-primary">Learn More</a>
</div>
</div>
EDIT: Another example demonstrating this effect can be found at . If you resize your window on that page, you will see that the header adjusts accordingly. I have tried inspecting the source code but have had difficulty locating the specific implementation.