[Support request] Create a bigger gaps between images with caption and elements underneath

[Mark]

Hi,

How can I increase the gap of white between the bottom of images (with and without captions) and the next element? This will be a site-wide problem

I have added an example URL with many examples below.

Thanks

[Leo]

Hi Mark,

Try adding this CSS:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Mark]

That does work. Thank you.

How do you determine the element name (in this case .wp-block-image)? I’m assuming I can do this for adding margins above and below iframes, youtube videos etc.

Rather than me opening up new tickets, I might be able to do all this myself

Cheers

[Fernando]

Hi Mark,

Here’s an article with regards to CSS selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

Then, a shortcut way to do it is this:

1)  Hover the cursor over the element and hit right click on your mouse.
2)  Select Inspect.
3)  See the highlighted code.
4)  Right click on the highlighted code.
5)  Select Copy > Copy selector or get the class or another selector as mentioned in the article above: https://share.getcloudapp.com/JruoEbwy

Hope this clarifies!

[Mark]

Thanks Fernando. I was able to do this for videos. What about iframes? I can’t seem to get it to work for Instagram or Google Map embeds. Check out the URL in the private area to see what I mean. What do I add for that?

[Fernando]

It should work as well with the right CSS selector.

Example:

.single-post iframe {
    margin-bottom: 1em;
}

or

iframe {
    margin-bottom: 1em;
}

Kindly let us know how it goes.

[Mark]

Hi Fernando,

This works for Google Map embeds:

iframe {
margin-bottom: 1em;
}

But no joy for Instagram and other embeds. For example, look under item 1 in the Private area. This did not work for the embeds:

.single-post iframe {
margin-bottom: 1em;
}

Cheers

[Fernando]

It has inline CSS added which takes precedence over CSS added through Additional CSS or any other stylesheet.

Try making it:

iframe {
margin-bottom: 1em !important;
}

for it to become higher in specificity over the inline margin it has.

[Mark]

Excellent! Thank you.

[Fernando]

You’re welcome Mark!

[Author]

Posts