Designing Help

Hi,

To clarify: You want the page's featured image to have rounded edges and to overlap on top of the page hero section?

Let us know.

I want the same look :)

With featured image, post title, author etc. same

Hi there,

Can you add a featured image and then link us to a post? We may be able to help with some of the CSS.

Have a look at this screenshot here I've mentioned all the things :)

And here's the screenshot of my website :)

For more info, I'm also adding the URL of my site and another site too.

My URL - https://exactblogging.com/elementor-black-friday-sale/
But I Want This Look - https://backlinko.com/introducing-the-digital-marketing-templates-library

Thanks,

Any updates?

Hi there,

this Hero example shows how to setup the Post Meta for that Header Elemetn:

https://docs.generatepress.com/article/page-hero-examples/#example-2

For the featured image can you move its location to Above Content Area in Customizer > Layout > Blog --> Featured Images >>> Posts

My featured image is looking like this, But I want exact like this kindly help :)

Will something like this work?:

.single .page-hero + .featured-image {
    margin-top: -100px;
}

No, the above CSS doesn't works :(

Let me tell you again in detail and with screenshots, Hope this time you'll make me happy :)

First of all, have a look at this screenshot, In this screenshot, I've described the positioning and the size of the featured image.

Now see this screenshot, I want my image and space between all terms the same like this screenshot.

Hope you got it!

My section is looking like this but I want exactly the same as this :)

This is the URL of my page - https://exactblogging.com/siteground-vs-greengeeks/

This is the image of the other website - https://backlinko.com/introducing-the-digital-marketing-templates-library

Hoping for the best solution this time :) :) :) :)

Did you add the CSS that Tom provided as that should do exactly that ?

It's hiding the last updated and author name :(
Have a look at this :(

In Tom's CSS you will see this:

margin-top: -100px;

This is moving the image UP by 100px. You can reduce that amount to stop that from happening.
To make sure it never overlaps the Hero content, edit your Header Element and make sure the Bottom Padding is greater that the margin-top value. eg. 110px.

Okay now it's looking good in my PC, But it's not responsive, It's looking very weird in my other devices.
Have a look at this in mobile devices.

You simply need to increase the Bottom Padding of your Header Element as i said above.
You can set it separately for Desktop and Mobile.

In the CSS you have set this: margin-top: -157px;
So you Header Element Bottom Padding needs to be at least 160px to stop it from overlapping....