[Resolved] How can I move up the featured image to overlap page hero in Split template

Home Forums Support How can I move up the featured image to overlap page hero in Split template

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1311858
    nomadiceman

    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

    #1312193
    David
    Staff
    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;
        }  
    }
    #1312202
    nomadiceman

    thank you so much, that worked perfect. ive been going insane all day trying to figure that out 🙂

    thank you.

    #1312265
    David
    Staff
    Customer Support

    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

    #1312269
    nomadiceman

    awesome

    #1312298
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.