Image caption not aligning under image

• 

  timibandito · Member · Mar 29, 2020 at 1:24 pm

  • Copy link
  • Add topic to favorites

  Hello everyone,

  I am having trouble formatting the text that appears underneath images.

  Instead of appearing in a horizontal line as it should the text forms a vertical block that is not appealing or readable.

  Does anyone know how I can fix this error?

  Ex: This article all the text under the images appears as described. This is the case for all my articles.
  Direct link: https://cryptoblog.news.blog/2020/03/29/nike-vs-adidas-which-is-the-better-investment/

  Thank you for taking the time to read this!

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

• 

  timibandito · Member · Mar 29, 2020 at 6:26 pm

  • Copy link

  Can anyone help me out with this issue?

• 

  timibandito · Member · Mar 29, 2020 at 7:42 pm

  • Copy link

  up

• 

  supernovia · Staff · Mar 30, 2020 at 4:04 pm

  • Copy link

  Hi there, is this happening only when you add markup to the caption? When did this start happening?

  I think we can help you with some CSS to fix this. I’m just wondering if taking markup out helps, first.

• 

  timibandito · Member · Apr 17, 2020 at 12:58 pm

  • Copy link

  Hi. Thank you for answering my post.

  What do you mean by markup? I have no idea what that is..

  I insert an image normally, then type a sentence under the image. It displays normally in draft mode. However, once I publish, the text under the image on the published article appears in the wrong format as shown in the example above (cf link in original post).

• 

  staff-zinnia · Staff · Apr 17, 2020 at 2:57 pm

  • Copy link

  Thanks for the explanation. Can you take a screen shot of what you see before and after publishing? Then we can compare that to what we are seeing on our side. Just put those screen shots right in the site’s media library.

  https://en.support.wordpress.com/add-media/

  I am curious if the behavior is consistent in more than one browser. Can you try a different one just for testing? Let me know. Thank you :)

• 

  timibandito · Member · Apr 17, 2020 at 3:24 pm

  • Copy link

  I took screenshots and uploaded the pictures on the media library.

  Same issue happens in both Brave Browser and Google Chrome.

  Rgds
  Timothée

• 

  supernovia · Staff · Apr 17, 2020 at 8:24 pm

  • Copy link

  By markup I meant links and bold text and line breaks, but I see from the example you shared that markup doesn’t seem to matter.

  Please try this CSS:

  .aligncenter>figcaption {
      text-align: center;
  }
  
  .wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image.is-resized>figcaption {
      display: block;
  }

  Or, if you want the captions just a bit fancier:

  .aligncenter>figcaption {
      text-align: center;
  }
  
  .wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image.is-resized>figcaption {
      display: block;
      font-size: smaller;
      margin-bottom: 2em;
  }

  … feel free to tinker as you like.

  Also I noticed an issue with center aligned images and fixed that. I didn’t see issues with others, but if you’re using right-aligned images and run into trouble, please let us know.

• 

  timibandito · Member · Apr 17, 2020 at 8:50 pm

  • Copy link

  Hi, thank you very much for taking the time to solve this problem.

  The issue is I have zero experience in using CSS so I have no idea where to insert that CSS text…could you recommend some resources where I can learn about this?

  Kind rgds
  Timothée

• 

  supernovia · Staff · Apr 17, 2020 at 9:31 pm

  • Copy link

  Oh, my apologies. Go to My Site > Customize, and click on CSS.

  Make a new line after the text that is there, and just paste in the code.

• 

  timibandito · Member · Apr 17, 2020 at 9:55 pm

  • Copy link

  OK.

  Just to be sure, I click on “Addtional CSS”?

  Do I then have to manually retype in all image legends or will they automatically be adjusted?

  Rgds
  Timothée

• 

  supernovia · Staff · Apr 18, 2020 at 2:02 am

  • Copy link

  Yup, under Additional CSS.

  And that should fix all of them for you. If you still have trouble with any, please link to the article and we’ll take a look.

• 

  timibandito · Member · Apr 18, 2020 at 1:53 pm

  • Copy link

  It worked.

  Thank you so much for taking the time to help me fix this problem.

  The captions are perfect now.

  Have a great day!