Docs

[fhecht]

Hi,

I have noticed that when I use the Alert shortcode in a blog post, the text size of the alert box is not the same size as the text in the post.
Is there any way to make the text size match the size of the text in the post?

Thank you.

[Friech]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain of the issue. If you wouldn’t mind providing us with a little more clarification (a link to your site would be very helpful, and perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

[fhecht]

Sure!

As you can see on this page:
http://fhecht.dk/ondt-i-laenden/

If you scroll down about 1/3 then the text in the blue box is much smaller than the normal text. The blue box is inserted as an alert shortcode.

[Lely]

Hi There,

Add custom-alert on the alert shortcode class option. Then add the following custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.custom-alert {
    font-size: 18px;
}

Hope this helps.

[fhecht]

Hi,

I have added the CSS, but I am not quite sure what you mean by adding the custom-alert in the alert shortcode class option.

This is an example of how the shortcode looks like:

[x_alert type="info"]Jeg vil i denne artikel prøve at forklare selve videnskaben om smerte, samt hvad det betyder og hvad det ikke betyder, på en letforståelig måde.[/x_alert]

[Darshana]

Hi there,

You can assign that class to your shortcode as follows.

[x_alert class="custom-alert" type="info"]Jeg vil i denne artikel prøve at forklare selve videnskaben om smerte, samt hvad det betyder og hvad det ikke betyder, på en letforståelig måde.[/x_alert]

Hope that helps.

[fhecht]

I have updated the code to include the class, but it still doesn’t work.

[Thai]

Hi There,

Upon checking your website, I could see that you forgot to add the closing bracket(}) in your custom CSS.

Please find this CSS:

@media (max-width: 668px){
	footer {
		display: none;
	}
}
  
@media screen and (max-width: 767px){
    .single-post .x-container.width {
        width: 99% !important;
    }
    .single-post .entry-content {
        font-size: 15px !important;
    }

  	h1.entry-title {
  		font-size: 150%; 
	}
  
  	h2, h3 {
  		font-size: 130%; 
	}
}

.custom-alert {
	font-size: 18px;
}

And replace to this:

@media (max-width: 668px){
	footer {
		display: none;
	}
}
  
@media screen and (max-width: 767px){
    .single-post .x-container.width {
        width: 99% !important;
    }
    .single-post .entry-content {
        font-size: 15px !important;
    }

  	h1.entry-title {
  		font-size: 150%; 
	}
  
  	h2, h3 {
  		font-size: 130%; 
	}
}

.custom-alert {
	font-size: 18px;
}

Hope it helps 🙂

[fhecht]

That seemed to work.
Thank you so much for taking the time to help me 🙂

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts