WordPress twentytwelve child theme development

[jagrav]

Hi, I’m switching my wordpress child theme from twentyten to twentytwelve because I want my websites to be more responsive. I’m starting with the layout of the home page and am wanting my header to be full width at the top, while still having margins for the rest of the page.

Here’s an [example](http://radioananda.awakenedwebdesign.com/ “WordPress twenty twelve child theme: header full width”).

Can anyone get me rolling? I’ve be stuck on this for quite a while. Thanks

[Paulie_D]

I don’t know the 2012 theme but I believe that the site would normally have a ‘wrapper’ element (either by class or id) which contains the content and centers it to a set width.

If you take the header OUT of the wrapper it will (unless there is another setting) automatically be 100% width.

Like this. http://codepen.io/Paulie-D/pen/vBlED

If you need the actual content of the header to line up with the wrapper you can just as another div inside the header. If not just remove it from the example.

[jagrav]

Thanks Paulie_D > That got me moving in the right direction.

I moved the header image out of the header block using the divs you provided and resized the page so it matched the width of the header image. It looks great in the monitor at full size.

When I resize the window to check responsiveness at smaller screen sizes the header image doesn’t resize at the same rate as the page.

I hope the codepen is helpful: [http://codepen.io/jagrav/pen/LImeC](http://codepen.io/jagrav/pen/LImeC “Making the header image page width”)

Any ideas?

[jagrav]

Thanks mcjohnst

Your answer was helpful. It made me re-look at the header-image block and change the css that Paulie_D gave me.

You see the css in [codepen](http://codepen.io/jagrav/pen/kjeAt “Making header-image block responsive”).

It’s resizing better now in Firefox and I.E. 8.

It would be great to get the wordpress custom background image to be responsive also. So it flows with the header-image.

[Author]

Posts