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.
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.
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.
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.
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.
Can anyone get me rolling? I've be stuck on this for quite a while. Thanks
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.
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
Any ideas?
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.
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.
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.