Photo caption lines too close together

  • peelarchives · Member ·

    Hello,
    Would you be able to advise on how to make the photo captions look less squashed together? The lines are far too close together (narrow line leading). We’ve tried using the larger font option overall, and that makes the captions way larger than the body text, which looks silly. We’ve also experimented with different fonts but either don’t like them or have the same problem (captions either too squished or too large). Please note that we don’t want to change our entire theme at the moment.

    I think our plan allows us to do some coding (I haven’t contacted chat as I’ll be away from email and phone for a while). But I don’t know how to use CSS so if that is the solution I could use some explicit guidance. Thanks!

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

  • shubhamgmath · Member ·

    Hi peelarchives

    Would you be able to advise on how to make the photo captions look less squashed together? The lines are far too close together (narrow line leading). We’ve tried using the larger font option overall, and that makes the captions way larger than the body text, which looks silly. We’ve also experimented with different fonts but either don’t like them or have the same problem (captions either too squished or too large). Please note that we don’t want to change our entire theme at the moment.

    To make the photo caption look less squashed we need to increase the line height for that which can be done by adding the below CSS code to your site

    .wp-caption .wp-caption-text {
    line-height: 1.5em !important;
}

    Custom CSS can only be added if you are under premium or business plans. To know more about how to add custom CSS here is the support document for that:
    https://en.support.wordpress.com/custom-design/editing-css/

    To know more about plans features and pricing please refer to support link below:

    https://wordpress.com/pricing/

    Hope this helps.

  • peelarchives · Member ·

    Thanks very much, I can add the code (we’re on a premium plan), but how and where? Sorry, I don’t know what to do with the code. Appreciate your help.

  • shubhamgmath · Member ·

    Hi peelarchives

    Steps that you need to follow for adding CSS code:

    1. Go to My Sites on the top left corner of the site.
    2. Click on Customize option in the left panel.
    3. Click on CSS.
    4. A panel will appear then add the above code to that panel.
    5. Click Publish.

    Hope this helps, feel free to ask if you have any other doubts.

  • peelarchives · Member ·

    Thanks so much, will give it a try. Do I just dump the code anywhere in that panel?

  • shubhamgmath · Member ·

    Yes just add that code to a new line you can also look at the screenshot below:
    https://cl.ly/1c1o2R2p2K3l

    Hope this helps.

  • peelarchives · Member ·

    Thanks, worked perfectly!
    Need to educate myself on CSS.
    Thanks again for your time!

  • shubhamgmath · Member ·

    Cheers !!

    You’re Welcome. Happy to help :)

    Additionally, You can also go through this support document below for CSS articles and tutorials and if you face any issue further WordPress community is here to help you out.
    https://en.support.wordpress.com/custom-design/editing-css/#css-help

  • The topic ‘Photo caption lines too close together’ is closed to new replies.