- This topic has 24 replies, 5 voices, and was last updated 1 year, 6 months ago by Leo.
December 17, 2020 at 1:02 am #1583943Rpn
Hello GeneratePress Team,
First of all, thank you for your great support.
I need designing help, My post above section is looking like this after using some CSS and PHP code I think which I got from the documentation.
But I want to make it something like this.
Would you like to tell me how can I do this 🙂
Have a good day 🙂December 17, 2020 at 2:24 am #1584047ElvinStaffCustomer Support
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.
A wise man once said:
"Have you cleared your cache?"December 17, 2020 at 2:57 am #1584089Rpn
I want the same look 🙂
With featured image, post title, author etc. sameDecember 17, 2020 at 10:00 am #1584725TomLead DeveloperLead DeveloperDecember 19, 2020 at 3:39 am #1586847Rpn
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,December 19, 2020 at 8:14 am #1587236Rpn
Any updates?December 19, 2020 at 9:31 am #1587313DavidStaffCustomer Support
this Hero example shows how to setup the Post Meta for that Header Elemetn:
For the featured image can you move its location to Above Content Area in Customizer > Layout > Blog –> Featured Images >>> PostsDecember 23, 2020 at 9:55 am #1592300December 23, 2020 at 11:32 am #1592425TomLead DeveloperLead DeveloperDecember 24, 2020 at 12:34 am #1592870Rpn
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!
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 🙂 🙂 🙂 🙂December 24, 2020 at 3:57 am #1593015DavidStaffCustomer SupportDecember 24, 2020 at 4:26 am #1593034Rpn
It’s hiding the last updated and author name 🙁
Have a look at this 🙁December 24, 2020 at 4:34 am #1593044DavidStaffCustomer Support
In Tom’s CSS you will see this:
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.December 24, 2020 at 4:50 am #1593055RpnDecember 24, 2020 at 5:02 am #1593069DavidStaffCustomer Support
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….
- You must be logged in to reply to this topic.