Grow your CSS skills. Land your dream job.

WordPress twentytwelve child theme development

  • # March 20, 2013 at 7:56 pm

    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

    # March 21, 2013 at 5:51 am

    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.

    # March 21, 2013 at 3:15 pm

    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?

    # March 22, 2013 at 5:08 pm

    Set your wrapper-pd to max-width: 80%; instead of width.

    And find where the media query for the main menu navigation menu is and lop the top margin off of it.

    Should be what you’re after.

    EDIT: The media query for the tablet – mobile range for the menu.

    # March 23, 2013 at 5:52 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".