Twenty Thirteen: improve header area padding to ensure stable layout at any size screen

[jvisick77]

Viewing Twenty Thirteen on Google TV, there is no side padding on the main title or navigation when zoomed in (which is default). The added padding in the media query doesn't apply. If padding was added to the base styles instead, it would adjust nicely.

Twenty Thirteen on Google TV

With padding adjusted

I like the patch, it has the added bonus of never coming in the situation weher we have not enough padding, like right before the 1069px media query kicks in.

jvisick77, would you mind refreshing the patch? The IE8 style should be moved into /css/ie.css and I think we can also remove the .site-header hgroup selector around line 2700. Could you also make sure to create the patch from WordPress' root directory? Thank you! :)

Updated patch

Yeah, I like not relying on media queries for padding if possible. I adjusted alignment for IE7 too.

Patch looks good. I tested in a bunch of screen sizes and browsers.

In 23678:

Twenty Thirteen: improve header area padding to ensure stable layout at any size screen. Props jvisick77, fixes #23732. (Small props also to Google TV for revealing the bug.)

@lancewillet I'm not sure if this was intentional for other reasons, but the following adjustment to the header width in ie.css was dropped in the update. Without it the alignment is off for ie8/7.

.site-header hgroup {

max-width: 1040px;

}

alignment in ie7/8

Replying to jvisick77:

I'm not sure if this was intentional for other reasons

Nope, wasn't on purpose. Probably my mistake or patch didn't apply cleanly for some reason. I'll fix it.

In 23688:

Twenty Thirteen: adjust header max-width value for older IE browsers. Props jvisick77, see #23732.