Embedding alert in text

[riugn557]

Hi there,

I asked how to embed an alert into text on this page http://www.eurasianwhispers.com/dungan-mosque-karakol/ and you can see it just below the first picture.

So I was asked to put in [x_alert style=“display:inline-block”]

The attribute worked in as much as it’s embedded the alert in the text. However, the alignment with the surrounding text looks quite clumsy and doesn’t sit as nicely as the pullquote does a bit further down the page (font color and size are not a problem as I can easily change them).

Perhaps it’s a padding/margin issue…I’m not sure… Is there something I can add to clear this up?

Thank you for your help,
EW

[john]

Hello,

You can try adding following CSS under the code below to X > Launch > Options > CSS

.x-alert {
  display: block;
}

It will apply a fullwidth style in the alert block.

[riugn557]

Hi John,

Sorry, that doesn’t seem to have done anything…

[john]

Hey,

Sorry, you can try the same rule with the !important property. Like this:

.x-alert {
  display: block !important;
}

[riugn557]

Hi John,

I think there must be some confusion here: by adding !important it just returns the alert to its default appearance - i.e. taking up the full width of the section box, rather than being embedded in the text as the pullquote is a little further down the page.

.x-alert {
display: block;
}

that embeds the alert, but the alignment with the surrounding text is all off - that’s what I’m trying to solve

[friech]

Hi There,

Please add margin-bottom: 0;vertical-align: text-bottom; to the style of your alert shortcode.

e.g.

[x_alert style="display:inline-block;margin-bottom: 0;vertical-align: text-bottom;"]

With the vertical-align property you have 3 options (text-top, text-bottom, middle)

Hope it helps,
Cheers!

[riugn557]

Hi Friech,

Thank you for your help; it’s looking much better now.

I was wondering though how I can shift the text up so that ‘However’ starts at the top-right corner of the alert box, rather than the bottom-right?

When I change vertical align to ‘text-top’ the first line moves to the top-right of the alert box (as I would like it to do) but the lines from ‘more than…’ stay below the alert box rather than following the first line as I would like them to… Is there anyway I can get them to do this?

Thanks again,
EW

[ruenel]

Hello There,

Do you want to have a look exactly like this:

If that is the case, please have your shortcode updated and make use of this one:

[x_alert class="left mts mrs" style="display:inline-block;margin-bottom: 0;vertical-align: text-bottom;"]

Hope this helps. Please let us know how it goes.