Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 29, 2019 at 10:55 pm #1084743
    tkumabe

    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!

    March 30, 2019 at 2:10 pm #1084868
    Mike

    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

    April 5, 2019 at 4:11 am #1087325
    tkumabe

    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!

    April 5, 2019 at 5:50 am #1087369
    Mike

    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

    April 5, 2019 at 10:56 pm #1087596
    tkumabe

    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

    April 6, 2019 at 5:19 am #1087672
    Mike

    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

    April 8, 2019 at 10:53 pm #1088442
    tkumabe

    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!

    April 10, 2019 at 4:47 am #1088958
    Mike

    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.