Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1084743

    Hi there,
    I would like an XX pixel amount of space after each photo caption in my blog posts. I can’t seem to find the right CSS to do this. If someone can help me, that would be great.

    Also, I’m now using the Gutenberg wordpress editor. When I add a Gallery to a post, how can I put my captions under the photo, and not on top of the photo?

    Thank you in advance!

    #1084868

    Hey tkumabe,
    Please include the url to the page in question so we can examine the elements. I assume when you say that you are using the “Gutenberg” editor you mean that you are not using one of the Advanced Layout Builder elements, in this case the css to move the captions under the images would be similar to what is found here. But we would need to see the page so we can examine the elements to assist with css.

    Best regards,
    Mike

    #1087325

    Hi Mike,
    Sorry for the delay. I was originally using the Gutenberg editor, but having switched back to Advanced Layout Builder, I still have the same issue. Essentially I just want XX pixel amount of space above each image I place, and below each image caption within my blog post, so that there is a whitespace “cushion” surrounding images. I managed to find the CSS for the space above the image, but I can’t seem to find the CSS that refers to the padding or margin after the caption of each image. My post isn’t live so I can’t show you the link, but hopefully I’ve explained this enough for you to understand what I’m trying to do.

    Many thanks!

    #1087369

    Hi,
    Thanks for the explanation, I understand, but there are a couple of different layouts for images and captions. To help us try to target the correct sectors please see our demo site and try to link to the same layout so we can assist.

    Best regards,
    Mike

    #1087596

    Hi Mike,
    Actually, you can look at one of my older posts.
    You can see how there’s space on top of my images, but not the same amount of space below the caption for that image. I’m just adding a single image to the blog post. Nothing fancy.

    Thanks!
    Taku

    #1087672

    Hi,
    To add a certain amount of padding after the image caption please try this css:

    p.wp-caption-text {
    padding-bottom: 30px !important;
    }

    Best regards,
    Mike

    #1088442

    Thanks Mike, that CSS worked.

    Question on the CSS for the space on top of images. I’m using the following:

    .single .post-entry img {
    padding-top:4em !important;
    }

    But if you look on the images in the link I gave you, once I load the page and hover my mouse over the image, the image jumps down a few pixels for some reason. This happens with every single image on that page when I hover over it. It’s rather strange and annoying.

    I’m not sure why this is happening.

    Also, the space on top of each image is clickable and opens the lightbox, which is what it should do when I click on the image itself. Any way to make that not clickable? I’ve used margin-top too but that still does the same thing.

    Thanks in advance!

    #1088958

    Hi,
    This is happening because the image is wrapped in a link and adding padding or margin to the image has increased the size of the link. To solve this please remove your css adding the 4em padding, and then add a custom class to the paragraph that the image is in, so your structure is like this:
    2019-04-09-224049

    <p class="image"> ... </p>

    Then add this css to your quick css, which will add the padding for your new paragraph class and remove the padding and margin from your image.

    p.image {
        display: flex;
        justify-content: center;
        padding: 4em;
    }
    p > a > img {
    padding: 0px !important;
    margin: 0px !important;
    }

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.