Captions reflowing incorrectly

  • Author
    Posts
  • #140169

    stevemulvey
    Member

    I’m not sure if this is an issue with the theme (MH Magazine), Gutenberg, or me. But when I add a caption to an image which is in my post with text flowing around it, it seems to reflow drastically – with only one or two words per line, centred in a very narrow column below the image.

    I have attached a link to a screenshot below because the post has not yet been published (for obvious reasons).

    This is the first time I have used an image with captions within a body of text, so I don’t know whether this is something new since Gutenberg, or whether I’m doing something wrong.

    If I remove the alignment settings from the image block, the caption behaves as expected. But as soon as I align it left, right or centred, the caption text becomes a narrow column again.

    Any help would be greatly appreciated.

    The blog I need help with is hexio.co.uk.

    #140259

    Hey @stevemulvey it’s pretty common that older themes (like MH Magazine) don’t work well with the new editor in all situations. I tried to reproduce the issue, but wasn’t able to. Can you describe the steps you went through, or better yet, re-create the bug on a test page on your site where I can see it.

    #140268

    stevemulvey
    Member

    I have put together a test post which illustrates my issue.
    The pictures are left, right and centred, with captions under each. I have included a picture at the end with no alignment at all where the caption seems to display correctly.
    When editing the post, the captions behave correctly. It’s only when I preview it that the captions go wrong.

    https://hexio.co.uk/2019/02/test/

    #140411

    Thanks for setting up the test page. After reviewing your site, it looks like you’re running the non-WP.com version of MH Magazine. Did you purchase it directly from the theme author? https://mhthemes.com/themes/mh/magazine/

    So there are two options here; I’d recommend getting in touch with the theme author if you’re still within the 12 month support window, and they should be able to fix this.

    Otherwise, we can craft a custom CSS solution to solve this problem, but it might break if they update the theme later. The fix isn’t _exactly_ that difficult. You can try adding this CSS to your Customizer:

    
    .wp-block-image figcaption, 
    .wp-block-image .aligncenter > figcaption, 
    .wp-block-image .alignleft > figcaption, 
    .wp-block-image .alignright > figcaption, 
    .wp-block-image.is-resized > figcaption, 
    .wp-block-audio figcaption {
      display: table-caption;
      width: 100%;
    }
    

    This CSS fixes the left and right aligned images in my tests.

The topic ‘Captions reflowing incorrectly’ is closed to new replies.