Archived topic
How can I move up the featured image to overlap page hero in Split template
5 replies · Started by nomadiceman on June 2, 2020
Hi guys
I want to move up the content so that the featured image overlaps the page hero in the split template
I want this to be on the single post pages only.
Please can you advise on how to do this. Sorry Im learning coding at the moment
Thank you for your help
Hi there,
try this CSS:
/* Desktop */
.single-post .page-hero + #page .featured-image {
margin-top: -180px;
}
/* MOBILE OPTIONAL if different overlap required */
@media (max-width: 768px) {
.single-post .page-hero + #page .featured-image {
margin-top: -200px;
}
}thank you so much, that worked perfect. ive been going insane all day trying to figure that out :)
thank you.
You're welcome.
That CSS selector is very specific and quite smart for CSS:
.single-post .page-hero + #page .featured-image
.single-post = is a <body> class for single posts only.
.page-hero + #page = this will target the page container IF and ONLY IF it comes after a page hero ( header element ).
So in all reading backwards it means style the featured-image found within the #page if that comes after a page-hero on a single-post
awesome
:)
