Full Width Header – Daily Dish

[Emma1202]

I am trying to set up a full size header for this site http://georgebrushlaw.wpengine.com/ in order to replicate this html site (http://georgebrush.net/index.shtml) in on the wordpress platform.

I changed the CSS to

.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
display: block;
height: 206px;
margin: 0 auto;
max-width: 1200px;
}

And I changed the function php file to this

//* Add support for custom header
add_theme_support( 'custom-header', array(
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 206,
'width' => 1200,
) );

I removed the .site header 80px padding to eliminate most of the padding at the top and bottom, but when I tried to remove the little bit of padding left by removing "contain !important;" in the section below, I eliminated the side padding but I also lost the mobile responsiveness.

.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
display: block;
height: 206px;
margin: 0 auto;
max-width: 1200px;

So my first question is: Cann I remove the last bit of padding without loosing the mobile responsive header?

Second, I didn't achieve full width. Did I miss a step?

Thank you so much.

http://georgebrushlaw.wpengine.com/

[Victor Font]

Full-width means max-width: 100%;, not 1200px. The reason the image is bound to 1080px is due to the .site-container margins. You have a 60px left and right margin for .site-container. This only leaves 1080px to display the header image.

If I may make a suggestion, for SEO purposes, it would be better to use text wrapped in schema.org markup rather that a header image. Search engines can't index the text on an image.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Emma1202]

Thanks! That explains it.

And thank you for your suggestion about SEO. To be honest wrapping the text in schema.org markup and aligning the images side by side to recreate the original header is above my pay-grade skills wise. I know it would be better, but I wouldn't know how to do that I'm afraid.

Regarding the Header and the navigation bar going 1200px across, is there a way to accomplish that?

[Author]

Posts