How to reduce space between the photograph and the text line just after it?

  • Author
    Posts
  • #132191

    f8web
    Member

    How do I reduce the space between image and the line of text following it in my site’s blog. Please see this link as an example – An article from my site’s blog

    I am using this CSS to reduce the space in the text (paragraph spacing) –
    p {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    }

    The blog I need help with is cottages.live.

    #132388

    mkrdip
    Theme Author

    Hi there,

    I think the text below the images is the caption for the image, right? WordPress by default have an option to add it to the image, not in the article. Please see this: https://en.support.wordpress.com/images/image-settings/#attachment-details. Adding the texts as caption will fix this and make it perfect for search engines.

    Cheers.

    #132524

    mkrdip
    Theme Author

    Hi there,

    I replied earlier but it was marked as spam, don’t know why. Please see previous reply which I unspammed.

    Cheers

    • This reply was modified 2 months by  mkrdip.
    #132664

    f8web
    Member

    Wordpress caption adds a background which I do not like. I was hoping that you’ll be able to provide CSS to reduce that space.

    #132696

    mkrdip
    Theme Author

    I can help you to change the background from the caption. Use this:

    .wp-caption-text {
        border: none !important;
        background-color: white !important;
    }

    The issue with the paragraph that it’s not Search Engine friendly and the margin would affect all other paragraphs. If you can use a custom class for the caption when you write them, it would be good to target that.

    <p class="custom-caption">Photo Caption Goes Here</p>

    Then the CSS is:

    p.custom-caption {
         margin-top: .4em;
         margin-bottom: .8em;
    }

    Cheers.

    #133782

    f8web
    Member

    Thanks a lot. How do I align it to the center and remove the border altogether?

    #134096

    mkrdip
    Theme Author

    Hi there,

    Please share the link where you have used the custom class I give you. Generally, the following CSS would remove the border and make the text center.

    p.custom-caption {
         margin-top: .4em;
         margin-bottom: .8em;
         text-align: center;
         border: none;
    }

    Cheers.

You must be logged in to reply to this topic.