How to Get My Page Headers to Resize Using Responsive Layout

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

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!

Puzzled: Responsive header with special resizing through pure HTML/CSS?

I've modified your JSFiddle and added a bit of JavaScript to get the effect I think you're looking for. There are also comments to walk you through exactly what the JS code is trying to accomplish.

Essentially, I'm binding a handler to the window.resize event, calculating the available space in the header, and adding or subtracting from the title container to maintain its width.

Bootstrap text (with headers) wont respond to resize

Resize the text inside h1 with vw (viewpost width).

Example -

100vw = width of your screen.

Just add a size of text using font-size : 2 vw;like this and use vw instead of pixels or em. Then text will be resized according to device/browser width.

Create a multi-div, centered, responsive header

Demo goes here: Fiddle Demo

HTML

<div class="page-content">
    <header>
        <div class="header-content">
            <div class="logo">LOGO HERE</div>
            <div class="content">HEADER CONTENT HERE</div>
        </div>
    </header>
</div>

CSS

header {width:100%;background-color:gray;padding:20px 0;}
header .header-content {width:880px;margin:0px auto;}
header .logo {float:left;width:220px;height:50px;background-color:lightgreen;}
header .content {margin-left:220px;height:50px;background-color:cyan;}
@media screen and (max-width:900px) { 
    header .header-content {width:auto;margin:10px auto;min-width:340px;}
    header .logo {float:none;margin:10px auto;}
    header .content {margin:10px;width:auto;}
}

Say What???

By floating the fixed-width logo to the left, and setting that width as the main content's fixed margin-left value, we get the header content element to be responsive, and basically take over the [headerWidth - logoWidth] leftover :-)

---

Related Topics