- This topic has 5 replies, 2 voices, and was last updated 3 years, 10 months ago by
.
-
Posts
-
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
Customer Support
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-imagefound within the#pageif that comes after apage-heroon asingle-postawesome
🙂
- You must be logged in to reply to this topic.