asked on

Need help with feature image in wordpress to display full image in header of single page template

Hi,

Need help with our site a popular news platform in our country. Our featured images are not appearing right on desktop and the positioning is off.. please look at: https://mwebantu.com/2019/06/27/standard-chartered-launches-first-ever-digital-bank-in-zambia/19908/

On this link cannot view the full photo and need help with styling it (css) so it appears right on desktop. On Mobile it is fine.

Thanks!

David S.

That seems to be caused by a parallax script.

<section class="boldSection bottomSemiSpaced btPageHeadline gutter  btNoTitle topSemiSpaced wBackground cover btParallax btDarkSkin btBackgroundOverlay btSolidDarkBackground " style="background-image:url(https://mwebantu.com/wp-content/uploads/2019/06/stanchart-launch.jpeg)" data-parallax="0.8" data-parallax-offset="-250"><div class="port"></div></section>

Open in new window

Try removing the parallax parts:

<section class="boldSection bottomSemiSpaced btPageHeadline gutter  btNoTitle topSemiSpaced wBackground cover btDarkSkin btBackgroundOverlay btSolidDarkBackground " style="background-image:url(https://mwebantu.com/wp-content/uploads/2019/06/stanchart-launch.jpeg)"><div class="port"></div></section>

Open in new window

Zakaria Acharki

Do you want it to look like this?

Kasonde Neddy

ASKER

David S thanks for the feedback trying to remove parallax as its not needed...

Zakaria Acharki -->> yes we do, but I am thinking maybe the image should go below the title, but for now need the image to display in full like in your screenshot

Zakaria Acharki

To do that try to add the image to the port div instead of the section background like below.

HTML:

<section class="boldSection bottomSemiSpaced btPageHeadline gutter  btNoTitle topSemiSpaced wBackground cover btParallax btDarkSkin btBackgroundOverlay btSolidDarkBackground ">
	<div class="port">
		<img src="https://mwebantu.com/wp-content/uploads/2019/06/stanchart-launch.jpeg" width="100%">
	</div>
</section>

Open in new window

CSS:

.single-post.btBoxedHeadline .btPageHeadline {
    max-width: 1326px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

.single-post.btBoxedHeadline.btHeadlineImage.single-post .btPageHeadline.wBackground > .port {
    min-height: auto;
    padding: 0px;
}

Open in new window

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.