Title/Meta problem on pages and single posts…

  • Resolved dalliann

    (@dalliann)


    5 years, 10 months ago

    Hi! I’m loving this theme and feel like I’ve FINALLY found the aesthetic I’ve been searching for over the last couple years.

    However, I am experiencing one issue that’s throwing off the look. Specifically, I like the layout of the posts on the main page but when I open up a single post or page, the post/page title and meta tags appear on top of the header image instead of inside the content area, making it very hard to read (and not so pretty). Is there a way to make the single posts and pages look exactly the same as the main page’s posts?

    If anyone has an idea of how to solve this, I’d really appreciate your help! Thank you!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there,

    The title overlaying the image is intentional – this theme is designed to use featured images as large, full-width headers on the single-posts and pages, with the post title layered on top. You can see this in action on the demo page, here:

    https://librettodemo.wordpress.com/2018/01/22/isabella-jake/

    It’s possible to move it using CSS, but the code is a bit complex as a lot of stuff needs to move, and you need separate CSS for different screen sizes so it looks good on mobile and computer screens.

    This is the closest I’m able to get it:

    @media only screen and (max-width: 640px) {
  .libretto-has-header-image .title-block {
    position: static;
    background: #faf9f5;
    margin-top: 280px;
    width: 100%;
  }
  header#masthead.site-header {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 641px) {
  .libretto-has-header-image .title-block {
    position: static;
    background: #faf9f5;
    padding-top: 20px;
    margin-top: 380px;
    width: 680px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
  }
  header#masthead.site-header {
    margin-bottom: 150px;
  }
}

@media only screen and (min-width: 860px) {
  .libretto-has-header-image .title-block {
    position: static;
    background: #faf9f5;
    padding-top: 20px;
    margin-top: 380px;
    width: 782px;
  }
  header#masthead.site-header {
    margin-bottom: 120px;
  }
}

.libretto-has-header-image .title-block div.entry-meta, .libretto-has-header-image .title-block div.entry-meta span a, .libretto-has-header-image .title-block div.entry-meta:before, .libretto-has-header-image .title-block div.entry-meta:after, .libretto-has-header-image .title-block h1  {
  color: #787065;
}

    For any further customization in this regard I’d recommend you look into getting help from a professional developer instead.

    Thread Starter dalliann

    (@dalliann)

    This is awesome! Thank you so much– I really appreciate it! ??

    Glad I could help ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Title/Meta problem on pages and single posts…’ is closed to new replies.