Set width: full 320 480 640 768 1024 1920 custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Toast Notification</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 2rem; background: #f7f7f7; }
.show-toast-btn {
padding: 0.75rem 1.5rem;
font-size: 1rem;
background: #444;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.toast {
visibility: hidden;
min-width: 240px;
max-width: 90vw;
background: #323232;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 1rem 1.5rem;
position: fixed;
left: 50%;
bottom: 2rem;
transform: translateX(-50%) translateY(40px);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 4px 16px rgba(0,0,0,0.13);
}
.toast.show {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.toast .toast-close {
background: none;
border: none;
color: #fff;
font-size: 1.2rem;
cursor: pointer;
margin-left: auto;
}
@media (max-width: 600px) {
body { padding: 1rem; }
.toast { padding: 0.75rem 1rem; font-size: 0.95rem; }
}
</style>
</head>
<body>
<button class="show-toast-btn" id="showToastBtn">Show Toast</button>
<div class="toast" id="toast">
<span>This is a toast notification. It will auto-dismiss in 3 seconds.</span>
<button class="toast-close" id="toastClose" aria-label="Close">×</button>
</div>
<script>
const showToastBtn = document.getElementById('showToastBtn');
const toast = document.getElementById('toast');
const toastClose = document.getElementById('toastClose');
let toastTimeout;
function showToast() {
toast.classList.add('show');
clearTimeout(toastTimeout);
toastTimeout = setTimeout(hideToast, 3000);
}
function hideToast() {
toast.classList.remove('show');
}
showToastBtn.addEventListener('click', showToast);
toastClose.addEventListener('click', hideToast);
toast.addEventListener('mouseenter', () => clearTimeout(toastTimeout));
toast.addEventListener('mouseleave', () => {
if (toast.classList.contains('show')) {
toastTimeout = setTimeout(hideToast, 2000);
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') hideToast();
});
</script>
</body>
</html>