css - How can I get my page headers to resize using responsive layout? -
so have site need functional both on mobile devices , on computers. i'm using bootstrap-responsive , have gotten lot of things work. i'm working on hero-unit front page. have page header auto-scale according screen size. main bootstrap site (http://twitter.github.com/bootstrap/) makes use of want main page header. appreciated.
relevant code:
<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: here's example of it. http://www.screenlight.tv/ if resize window on page, header resizes accordingly. i've tried looking @ source , i'm having hard time finding it.
okay i've figured 1 out. future reference, done using @media(max-width: )
property. instance, do:
@media(max-width: 480px) { h1 { font-size: 12pt; } }
or whatever need do. hope helps in future! cheers!
Comments
Post a Comment