WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Fourteen
[resolved] Twenty Fourteen: How to move post content entirely below featured images? (6 posts)

  1. OtakuD50
    Member
    Posted 4 months ago #

    I am absolutely loving Twenty Fourteen so far, but the fact that post content seems to be layered on top of my Featured Images is bothering me. I want the entire image to be visible and not have an awkward white space cutting into the bottom center of them.

  2. Lance Willett
    Theme Wrangler
    Posted 4 months ago #

    Hi, could you share a URL or a screenshot so we know what you mean?

  3. alchymyth
    The Sweeper & Moderator
    Posted 4 months ago #

    using a 'custom CSS' plugin or child theme, add something like this to the styles:

    .full-width .site-content .has-post-thumbnail .entry-header,
    .full-width.singular .site-content .hentry.has-post-thumbnail,
    .site-content .has-post-thumbnail .entry-header {
    	margin-top: 0;
    }
  4. OtakuD50
    Member
    Posted 4 months ago #

    I thought that code did the trick, but it also created a new problem. I decided to take some screenshots to better illustrate what I want.

    Twenty Fourteen Default

    As you can see, the post content takes up space on the banner, which I'm sure works for most people, but it's obvious why it's an unwanted feature here.

    Child

    The fix did exactly what I wanted to do, but it also created a white space above the featured image banner.

  5. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 4 months ago #

    Are you using Firebug or an equivalent tool? That tool will help you understand what's causing the white space - as we don't have a link to your site we can't explore why.

  6. OtakuD50
    Member
    Posted 4 months ago #

    Thanks for suggesting Firebug. It took me a while to figure out what it did, but once I knew what to look for, I managed to do some fooling around.

    Pretty much all I did was delete two lines. As far as I can tell, I only needed the first to get it to do what I wanted.

    .full-width .site-content .has-post-thumbnail .entry-header {
    	margin-top: 0;
    }

    I'm afraid just using trial and error didn't exactly help me "understand" why the fix worked. I would prefer more precise code that doesn't change anything other than what needs to be changed, but barring that I'll go with what seems to work.

Reply

You must log in to post.

About this Theme

About this Topic