Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get my page headers to resize using responsive layout?

So I have a site that I need to be functional both on mobile devices and on computers. I'm using bootstrap-responsive and have gotten a lot of things to work. Currently I'm working on the hero-unit for the front page. I have a page header that I would like to auto-scale according to screen size. The main bootstrap site (http://twitter.github.com/bootstrap/) makes use of something like what I want to do with their main page header. Any help is 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 another example of it. http://www.screenlight.tv/ If you resize your window on that page, the header resizes accordingly. I've tried looking at the source and I'm having a hard time finding it.

like image 948
Willem Ellis Avatar asked Mar 11 '12 00:03

Willem Ellis


People also ask

What is bootstrap explain the responsive web design?

Bootstrap is a popular front-end framework for web development. It contains pre-built components and design elements to style HTML content. Modern browsers such as Chrome, Firefox, Opera, Safari, and Internet Explorer support Bootstrap. Bootstrap includes a responsive grid system for varying layouts.

What is responsive design used in CSS framework?

Your web page should look good, and be easy to use, regardless of the device. It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.


2 Answers

Okay I've figured this one out. For future reference, this is done using the @media(max-width: ) property. So for instance, you would do:

@media(max-width: 480px) {
  h1 {
    font-size: 12pt;
  }
}

Or whatever you need to do. Hope this helps someone in the future! Cheers!

like image 170
Willem Ellis Avatar answered Sep 27 '22 19:09

Willem Ellis


If it's an image header photo (no text involved), using `class="img-responsive" as well works. I.e:

<div class="container-fluid">
 <div class="row">
 <img src="/images/sample_photo.jpg" class="img-responsive">
 </div>
</div>

Live sample here: http://www.bootply.com/Cc0rdXsJXP

like image 36
SM23 Avatar answered Sep 27 '22 19:09

SM23