SweetAlert small on mobile devices, and Resize SweetAlert icons

Question

I am linking to this SweetAlert library https://unpkg.com/sweetalert/dist/sweetalert.min.js, and when I display an alert on mobile, it displays very small. I have increased the text size, but the success, error, warning animations are very small. How can I resize these animations, or make the alert mobile friendly?

This is without CSS

And with CSS

Solution 1

Found the same thing....

2 options: Add this in CSS:

.swal2-popup {
font-size: 2rem;
}

or

Use these links for your cdn... and it will work....(but its sweet alert1)

https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js

https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css

Solution 2

Here are links for CDN for SweetAlert2:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css'>

I got these links from here .

Solution 3

I got the same problem, because i forgot to include meta viewport tag...

try inserting this into head of your page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Comments

[NLZK98]

The answer above works BUT! since you use swal2-popup / font-size property have in mind that the alerts that have text on it like "warning or info" will change size too