Twenty Sixteen Website title in Header

Hello Kietygory,

1) It looks like the code is already in your style.css, just need to make the margin-top pull it up higher:

.site-content .has-post-thumbnail .entry-header {
	margin-top: -85px;
}

2) I believe this is what you are looking for:

img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
	width: 100%;
}

Let me know if those solutions don’t work,
Sage

@sage – thx, tried it but the 2nd code doesnt work unfortunately :(.

Hey Kietygory,

The second code appears to be working as far as I can see, so I must be thinking something different. Would you mind explaining further what you are trying to achieve?

Thanks,
Sage

@sage, sorry for being unclear and thx for patience.

We desire feature image full width – here is example. The oilplatform picture.

Here is my screenshot:
– The yellow feature image to extend to red marked boxes.
– The pink Header image was achieved by WPBeach code.

My style.css is here with your suggestion already implemented. But it does not seem to work :(.

My unqualified guess: If you see full width, maybe it is because your browser is sufficiently zoomed in? Try zoom out.

Actually, I try both yours and heatherland’s above code on this child template with WPBeach and on clean child template. Does not work. It worked once with heatherland’s code but it was with some function.php code I recently deleted and have not been able to reproduce (now I carry out a logbook on everything I code!).

Today’s attempt: Will see if this function.php code works!

Again, thx for all support.

Ok, Im 1 step closer and this is as far as i can go, unless we have a better solution?

The below is NOT a true full-width feature image but a compromise. If you insert a large enough image then it will be full width even when you zoom out.

Solution:
Inserted the following code in functions.php. This removed restrictions feature image width. But it did not extend to full width!

function twentysixteen_post_thumbnail() {
	if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) {
		return;
	}
	if ( is_singular() ) :
	?>
	<div class="post-thumbnail">
		<?php the_post_thumbnail( 'full' ); ?>
	</div><!-- .post-thumbnail -->
	<?php else : ?>
	<a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
		<?php the_post_thumbnail( 'full', array( 'alt' => the_title_attribute( 'echo=0' ) ) ); ?>
	</a>
	<?php endif; // End is_singular()
}

Then I removed the following code from WPBeach. This removed the max width on feature image.

.site-content,
.site-footer,
.site-header-main {
	max-width: 1320px; 
	margin: 0 auto;
}

Hi Kietygory,

Thanks for the extra info.

My unqualified guess: If you see full width, maybe it is because your browser is sufficiently zoomed in? Try zoom out.

No, it was just because I wasn’t sure what you were trying to accomplish ??

So it looks like now that you have the top image as full width working fine, but the featured image fills up the screen. This looks different from the screenshot you posted, which one is correct? It seems like quite a lot of workaround work for something that could be done with a few lines of CSS :/

Let me know if you still need help on this,
Sage

@sage – correct. Header is ok. Feature image is horrible. Yes plz, if we can have full width feature image with a few simple css, i would most appreciate.

Yes correct – screenshot pic different from website now. Its because of the added function. But if we can get full width without this function im all for the suggestion. Thx ??

Hi Kietygory,

Would you mind taking out the function code just for now? Once that’s out I’ll be able to do wrangle the CSS a bit easier.

Thanks,
Sage

Done, and thx :).

Looks like your header is still full width?

Anyway, this should fix the featured image size:

.post-thumbnail {
	margin: 0 15% 2.625em !important;
}

.post-thumbnail img {
	width: 100% !important;
}

Let me know if that works,
Sage

Ok, i have removed WPBeach header code as well. So this is now a completely blank child theme with the suggested above codes. Does not seem to work ??

This should help with the header (replace the background-image url with whatever image you want to use if you want it changed):

.site-inner {
	max-width: 100% !important;
}

header#masthead {
	background-image: url(https://www.scandinaviansolution.com/wp-content/uploads/2016/09/cropped-solar002-1.jpg);
	background-size: cover;
	padding: 0 4.5455%;
}

.header-image {
	display: none;
}

Thats beautiful Sage! It did help with header without using WPBeach codes!

So now only got feature image to widen!

Hey, it looks like the code I pasted above isn’t in there?

Sage

Ok, have now both your codes in there:

.post-thumbnail {
	margin: 0 15% 2.625em !important;
}

.post-thumbnail img {
	width: 100% !important;
}

.site-inner {
	max-width: 100% !important;
}

header#masthead {
	background-image: url(https://www.scandinaviansolution.com/wp-content/uploads/2016/09/cropped-solar002-1.jpg);
	background-size: cover;
	padding: 0 4.5455%;
}

.header-image {
	display: none;
}