Featured Image not displaying properly

Support
#1

Hi I am converting a site to X-Pro. My header banners are not displaying properly. They should be flush to the top and full width. I want them to look like this. https://www.archinternational.org/blog/

But they look like this: http://www.cherylbenard.com/arch/blog/

Is this a theme file I need to edit? Can you help?

#2

Hi @kcostellomak,

Is the image that shows below the navigation area the featured image of the page and are you adding them on the page by adding it through the template file? i am not able to confirm these because the login details you have added is for the live site that is not using Pro.

For Pro, instead of adding the feature images through hardcoding, you can actually set them up through the header builder.

You can try adding another bar then set the background image of that bar using the dynamic content feature and select the featured image:

You can then set some options to the bar to add height to it by adding some elements to the bar like gap or line element.

Hope this helps.

1 Like
#3

So sorry! I gave you the live website login. I updated the secure note to give you access to the staging site. I’d rather change the theme file because I think that will be easier. The featured image shows up on the default template pages At the very least I need to identify that code so the feature image doesn’t display twice. Thank you!

#4

Hello @kcostellomak,

Thanks for updating in!

To make the header flush to the top and full width, please edit your header and in your bar settings, set the initial position to absolute.

Hope this helps.

#5

Oh so close! It’s flush to the top now but still not full width. (I’ll adjust the opacity of the header) See here http://www.cherylbenard.com/arch/projects/standwithnineveh/

Is there anything I can change in the class img-responsive? It seems like the width-100% means something different in X-Pro than it did in the original theme.

Thanks!!

#6

I see that the cover image is bound by the width of the header containers, (max-width=1400). Is there a way with css to have the image expand beyond that bounding box?

I also tried adding the feature image as a bar per instructions above, but then is was limited vertically and did not extend beyond the height of the footer.

#7

Update. Even with the header max-width =none, and the container set to 100% I am still getting the thick borders around the feature image.

#8

Hi @kcostellomak,

Are you referring to this?

That image is outside of the header in HTML markup, the header has nothing to do with that issue, that is happening because of the image max-height: 250px applied to it. To overwrite that height limit please add this to Theme Options > CSS

.img-responsive {
	max-height: none !important;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#9

That did it! Thank you so much!!

#10

Glad that we could be of help :slight_smile:

1 Like
#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.