#snackbar { visibility: hidden; min-width: 100px; /* Reduced width */ background: linear-gradient(90deg, #fff 0%, #fff 100%); color: #000000; text-align: center; border-radius: 10px; padding: 5px; /* Reduced padding */ position: fixed; z-index: 99999; left: 16px; /* Adjusted position */ bottom: 270px; /* Adjusted position for desktop */ font-size: 9px; /* Reduced font size */ font-weight: bold; transform: translateX(-100%); transition: transform 1s ease-in-out, opacity 1s ease-in-out; border: 2px solid #fff; /* White, thick outline */ display: flex; align-items: center; opacity: 0; } #snackbar p { margin: 0; /* Ensure no margin around the text */ padding: 0; /* Ensure no padding around the text */ flex-grow: 1; /* Allow the text to grow and take available space */ } #snackbar img { margin-left: 10px; /* Space between text and image */ height: 16px; /* Adjust the height of the image as needed */ } #snackbar.show { visibility: visible; transform: translateX(0); opacity: 1; } #snackbar.hide { transform: translateX(-100%); opacity: 0; } @media (max-width: 600px) { #snackbar { bottom: 100px; /* Adjusted position for mobile devices */ left: 16px; /* Adjusted position */ } }