Center-Align Notification Info
The following CSS can be used to center-align LearnDash Achievement notifications when using the official LearnDash Achievements add-on. It will center the title, description, and image, as well as put the text & image in one column, stacked on top of each other.
.noty_bar .wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
Text Above Image
If you want to move the image below the text, add this additional CSS:
.noty_bar .wrapper .image {
order: 2;
}
.noty_bar .wrapper .text {
order: 1;
}
This changes the order of the text & image, moving the image down below the text.
Badge/Icon Size
To change the size of the notification badge/icon, use the following CSS. You can change the width
value to anything you’d like.
.noty_bar .image,
.noty_bar .image img {
width: 125px;
}