|
|
| (25 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| .stat-box-hover {
| |
| display: none;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 175px; /* This is the default for larger screens */
| |
| background-color: #fff;
| |
| border: 1px solid #ccc;
| |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
| |
| padding: 10px;
| |
| transition: opacity 0.3s ease, transform 0.3s ease;
| |
| border-radius: 15px;
| |
| z-index: 1;
| |
| max-width: 250px; /* Set a maximum width to ensure it doesn't expand too much */
| |
| }
| |
|
| |
|
| .stat-box:hover .stat-box-hover {
| |
| display: block;
| |
| opacity: 1;
| |
| transform: translateX(0);
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .stat-box-hover {
| |
| left: 140px; /* Adjust the left position for smaller screens */
| |
| font-size: 14px;
| |
| max-width: 200px; /* Slightly smaller max width */
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 480px) {
| |
| .stat-box-hover {
| |
| left: 100px; /* Further reduce the left position for very small screens */
| |
| font-size: 12px;
| |
| padding: 8px;
| |
| max-width: 180px; /* Smaller max width for very small screens */
| |
| }
| |
| }
| |