how to change the width of ngx-toastr in angular 9

Question

I have ngx-toastr message notification from npm. Is there a way to change the size of message container?

when I open my application in small device, then toastr notification is too big.

ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-top-right',
      preventDuplicates: true,
    }),

Answer 1

If you want to change the size of toastr-dialog on all devices, add this to the styles.scss file:

.ngx-toastr {
  width: 250px !important;  // Specify toastr-dialog width for all devices
}

If you want to change the size only on small devices, you can use @media query to do it.

.ngx-toastr {
  @media (max-width: 768px) {
    width: 250px !important;  //  Specify toastr-dialog width only on small devices 
  }
}