{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 兄弟一词,经得起流年. 的问题《Increasing The Width Of Your Header》','https://www.manongdao.com/q-1224017.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
My website is www.rosstheexplorer.com
I want the header image to stretch across the whole page but I do not want any letters to be chopped off the 'Ross The Explorer' text.
In customer-header.php I had this code
*/
function penscratch_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'penscratch_custom_header_args', array(
'default-image' => '',
'default-text-color' => '666666',
'width' => 937,
'height' => 300,
'flex-height' => true,
'wp-head-callback' => 'penscratch_header_style',
'admin-head-callback' => 'penscratch_admin_header_style',
'admin-preview-callback' => 'penscratch_admin_header_image',
) ) );
}
I changed
'width' => 937,
to
'width' = 100%,
This had disastrous consequences which you can read about here Where Can I Download The Wordpress Penscratch Theme Files? and Finding custom-header.php in file manage on Wordpress Penscratch theme.
After 3 days I managed to fix the damage.
I have two header images, one for mobile devices. I have code relating to the header images in header.php and Additional CSS.
In header.php the code is
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
In additional CSS the code is
@media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
width: 100%;
}
}
@media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
I am unsure if I need to make modifications in the php files or in Additional CSS. After my last experiment caused me major problems I am reluctant to do any more experimenting on my own. Could someone provide a bit of guidance?
Based on comments below my code is now as follows
Additional CSS
@media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
width: 100%;
max-width: none;
}
}
@media screen and (max-width: 660px) {
.header-img {
display: none;
width: 100%;
max-width: none;
}
}
Header.PHP
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
<div id="page" class="hfeed site">
This achieves my aims up till the width of the browser is greater than 1300px, then white space starts appearing to the right of the header.
Your images will not expand to the full width of the page, because they are inside a wrapper with a max-width. You could take your images outside of the wrapper (see below). You could also apply
position:absoluteto the images, but that would cause a whole other set of problems.You would also have to add this CSS to force the image to expand beyond it's natural size, however this would start to blur the image a bit.
Using WizardCoder fantastic support and advice I was able to solve the problem.
In Additional CSS my code is now
In header.php my code is now