Adding margin for reusable shortcode and block problem

Support
#1

Hello!

What’s the best way to add a bottom-margin for a specific reusable shortcode?

I was thinking of giving the reusable shortcode a class, and then adding CSS. Don’t know if that’s possible, but if it is, could you please show me how to do it?

Also, the shortcode block in Gutenberg constantly does this:

https://puu.sh/CWlhw/66e6f15a05.png

Is there a problem with how I’m putting the shortcode in?

https://puu.sh/CWlim/d3b8274a2b.png

#2

Hi Andy,

Thanks for writing in!

You can add bottom margin to a shortcode or any element by adding a pre-built element spacing classes.
For example;

[shortcode class="mbs"]some text[/shortcode]

<div class="mbm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. </div>


<p class="mbn">Maecenas in erat magna. Vivamus in aliquet arcu. Curabitur iaculis scelerisque neque a tincidunt. Proin aliquam tortor vel sapien aliquet, eu dignissim nulla condimentum. </p>

mbs means margin bottom small. You can have small, medium, large or none. For more details about element spacing, please check this out:

Hope this helps.

#3

Hm, I tried [highlight class=“mbs”] Test [/highlight] but it didn’t add a bottom-margin. Do I have to add CSS to it?

I also tried:

.x-highlight {
margin-bottom: 2.15em; !important
}

And how about the error “invalid content” thing that keeps popping up?

#4

Hey Andy,

Margins will not be applied to element tags usually displays inline like span, mark, em, i, strong, etc. You can only apply it to independent tags like p, div, article, a, li, ul, ol, and others.

Please take this for example:

<p class="mbn">[highlight] Test [/highlight]</p> 

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut luctus quam tellus, sed porttitor justo auctor sit amet.</p>

<p>Ut bibendum lacus ac magna placerat euismod. Vivamus molestie tristique tellus, non dignissim nulla malesuada vel. Nulla imperdiet urna sed lacus cursus rutrum id at odio. Donec laoreet tincidunt risus in aliquet.</p>

Hope this explains it briefly.

#5

Is there a way to just add a bottom margin to highlight shortcodes? I tried

.x-highlight {
margin-bottom: 2.15em; !important
}

#6

Hi Andy,

Like Ruenel said above, you can’t have a top and bottom margin on a displays: inline; elements. If you want to, you can set your highlight mark up to display: inline-block; or display: block;

e.g.

.x-highlight {
	margin-bottom: 2.15em !important;
	display: inline-block;
}

But then if this highlighted text is part of a paragraph margin, it will going to mess up its line-height alignment.

Regarding the “invalid content”, That seems to cause by the Youtube video URL. Please use the video block for adding a video on Gutenberg.

Hope it helps,
Cheers!

#7

Ah I see.

And regarding the invalid content, how would I place a video block inside the shortcode block?

#8

Hi Andy,

Try something like this:


   [accordion id="my-accordion"] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your text here <iframe width="560" height="315" src="YOUTUBE URL GOES HERE" frameborder="0" allowfullscreen></iframe>TEST[/accordion_item][/accordion]

In case you encounter any issue, we might need to check your setup. You might see the same issue still in case you do have invalid SSL setup. Thank you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.