[Resolved] Images & YT Videos Margin Bottom

[Benjamin]

Hi, I also wanted to use this code:

https://generatepress.com/forums/topic/no-spacing-beneath-images-in-a-post/#post-2417991
https://generatepress.com/forums/topic/why-there-is-no-bottom-margin-on-images-and-how-i-add-it/

Slight problem- the wp-image variation fixes some of the images, and the figure variation fixes other sets of images and the youtube videos.

Anyway, the point is in all cases, there are always images/ videos that are broken.

Can you please provide code to fix all of these? I’ll attach the pages that I’m using for reference in the sensitive information section. Look at the images and youtube videos (if applicable) on these pages.

Thanks.

[Leo]

Hi Benjamin,

Anyway, the point is in all cases, there are always images/ videos that are broken.

Not sure if I fully understand the statement above.

Can you first apply Fernando’s CSS here?
https://generatepress.com/forums/topic/why-there-is-no-bottom-margin-on-images-and-how-i-add-it/

It should work well from what I can see. Let me know when it’s added so I can see the issue.

Thanks!

[Benjamin]

I apologize, I really didn’t explain that well.

With this code below, all of the videos & images have margins in posts, but images on pages don’t have a margin. (The images on the page I am referencing are set to center).

figure {
margin-bottom: 1.5em;
}

(I currently have this code active).

With this code below, the images on the pages & posts have a margin, but not the videos in the post.

.wp-block-image {
margin-bottom: 1.5em;
}

I have tried combining it as follows (below), but then nothing works.

.wp-block-image figure {
margin-bottom: 1.5em;
}

I just tested it with both added separately, and that works, but I don’t want to add unnecessary/double code. That said, if this is the only solution, then it is fine.

I also just set the images to align: “none” and then the figure code works. Maybe that would be the simplest solution here, but it doesn’t seem very elegant. XD.

Anyway, sorry for this long inquiry, I hope that makes more sense, and let me know. Thanks.

[Leo]

I just checked the two links you’ve provided and don’t see an issue at all.

All the images have this code applied:

figure {
    margin-bottom: 1.5em;
}

Can you guide me to an image that is still having an issue?

[Benjamin]

Yes, thanks, that’s because I set the images on the page to align = none.

If it is set to center on pages, then it doesn’t work with that code.

But anyway, I guess we figured it out.

I should say, I really wish GP just fixed this in the theme code, it is such a simple problem, and so many of the users have trouble with this.

Thanks.

[Leo]

It’s more of a WordPress problem.

Any chance you can set an image to center align so I can see why the code isn’t working?

[Benjamin]

My bad for taking so long to respond. (Kind of forgot about this but somehow remembered it just now XD).

I set the first 2 to center align on the about page of my staging site, and the last one is on align none.

See the sensitive info section for the URL.

Thanks.

[Ying]

Hi there,

try this CSS instead:

.entry-content .wp-block-image figure {
    margin-bottom: 1.5em;
}

[Author]

Posts