When I insert a picture into a page, the title takes a strange style

  • Unknown's avatar
    mooperd · Member ·

    Hi,

    https://mooperd.wordpress.com/tech/freeipa-technical-brief/

    You can see that this page is getting a strange title. It seems to happen when I insert a picture into the page.

    It should look like this:

    Agile Infrastructure

    Thanks,

    Andrew

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Andrew,

    Thanks for letting us know! I see what you mean about the title showing up strangely — it is indeed triggered by adding a picture to the page. That looks like a bug in the Boardwalk theme you’re using. I let our team know so they can fix up that theme.

    I’ll let you know when I get an update about that. If you’re looking for a workaround in the meantime, you can add a featured image to that page and the featured image will appear behind the page title (also keeping the title from overlapping the text on the page).

    Please let me know if I can do anything more to help with that. :)

  • Unknown's avatar
    mooperd · Member ·

    Hi Rachel,

    Thanks for the update. Do you have an idea of when the bug will be fixed? I was hoping to be able to launch the site soon.

    Ta,

    Andrew

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Andrew,

    I’m not sure when our theme developers will have a chance to take a look at my report, so I can’t predict when it will be fixed. However, I came up with this custom CSS you can add in the CSS section in your Customizer to patch it up in the meantime:

    body.page.page-id-212:not(.title-with-content) .hentry.has-post-thumbnail .entry-header {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  position: inherit;
  top: inherit;
  background: inherit;
  color: inherit;
}

body.page.page-id-212:not(.title-with-content) .hentry.has-post-thumbnail .entry-title {
  padding: 0;
}

@media screen and (min-width: 768px) {
body.page.page-id-212:not(.title-with-content) .hentry.has-post-thumbnail .entry-header {
  padding-top: 72px;
  padding-left: 0;
}
}

    Please let me know if you run into any trouble with that.

  • Unknown's avatar
    mooperd · Member ·

    You are righteous.

  • Unknown's avatar
    mooperd · Member ·

    Weirdly this page with no pictures

    https://mooperd.wordpress.com/tech/

    Is affected with the bug. However this one with the pictures looks fine:

    https://mooperd.wordpress.com/tech/freeipa-technical-brief/

  • Unknown's avatar
    rachelmcr · Member ·

    Ah, sorry about that! I only saw the one affected page when I checked your site earlier.

    The CSS I gave you only fixes that one page — it uses the .page-id-212 class to identify what page to fix. If you’d like that CSS to apply to all pages, you can remove that class from the code:

    body.page:not(.title-with-content) .hentry.has-post-thumbnail .entry-header {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  position: inherit;
  top: inherit;
  background: inherit;
  color: inherit;
}

body.page:not(.title-with-content) .hentry.has-post-thumbnail .entry-title {
  padding: 0;
}

@media screen and (min-width: 768px) {
body.page:not(.title-with-content) .hentry.has-post-thumbnail .entry-header {
  padding-top: 72px;
  padding-left: 0;
}
}

    However, keep in mind that will also affect pages with featured images that are meant to have that styling on their page titles. (It looks like you’re currently not using featured images anywhere, so that should be ok.)

    Let me know how that goes. :)

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Andrew,

    Our team fixed up the bug in the theme that caused this problem, so you can remove that custom CSS now if you’d like and everything should work as expected. If you notice any more issues with it, please let me know. :)

  • The topic ‘When I insert a picture into a page, the title takes a strange style’ is closed to new replies.