Problem with paragraph breaks in an alert box

Support
#1

Hi there,

I was just wondering if there was any way to stop this formatting problem that I’m getting with the alert boxes:

When I add a paragraph break within the alert box, the color, font, size, and line space of the text following the break changes from the original for some reason.

Is there any way to have paragraph breaks in an alert box while keeping the formatting consistent?

Thank you,
EW

#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Hi John,

Thanks for getting back to me - here you go

Cheers,
EW

#4

Hi there,

It seems that you have missed providing the URL of your site.

Is it http://www.eurasianwhispers.com/? I tried checking it but I can’t seem to see any alert box.

#5

Hi Jade,

Sorry, I must have misread John’s message.

The post I’m referring to is http://www.eurasianwhispers.com/turkmenistan-caspian-paradise/

The alert box is a little way down from the top.

Thanks,
EW

#6

Hi EW

Please add the following code to Cornerstone CSS

.x-alert-block {
    padding: .786em 1.15em 1em;
    margin: .05em 0 .25em;
    font-size: 18px;
    letter-spacing: -1px;
    line-height: 1.3;
    text-transform: none;
    color: inherit;
    font-weight: 600;
}

Hope it helps

#7

Hi Joao,

I found actually that this code worked better:

body .x-alert.first p,
body .x-alert.first {
	font-family: 'Mandali', serif;
    color: #4d8fcb;
    font-size: 14px;
    font-style: normal;
	font-weight: normal;
}

but I wanted this code to only apply to the first alert box that I have in the text and not the other one. So I added the class “first” to the alert box that I want to change like this:

<p>[alert type="info" close="false" heading="Some of the oddities you can find at Awaza:" class="left mts mrs; first" style="display:inline-block; max-width: 350px; margin-bottom: 0; vertical-align: text-bottom;"] • Concrete yachts </p><p>• Spas offering treatments that involve strong magnets</p><p>• A sumptuous riverside restaurant ... that is solely for the enjoyment of the president. No riffraff permitted! [/alert]</p>

so that the CSS would only apply for that alert box, but it didn’t work, and the other alert box is still affected.

Could you please tell what I am doing wrong with the Alert code/CSS?

Thank you,
EW

#8

Hi EW,

Please remove the semicolon in your class.

It should only be

class="left mts mrs first"

Hope that helps

#9

Thank you, Paul, it works perfectly now

EW

#10

Glad to hear it.

Cheers!