|
|
| (17 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| .stat-box-hover { | | .stat-infoboxes-container { |
| display: none;
| | max-width: calc(100% - 300px); |
| 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) { | | @media (max-width: 768px) { |
| .stat-box-hover {
| | .stat-infoboxes-container { |
| left: 140px; /* Adjust the left position for smaller screens */
| | max-width: 100%; |
| 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 */
| |
| }
| |
| } | | } |
.stat-infoboxes-container {
max-width: calc(100% - 300px);
}
@media (max-width: 768px) {
.stat-infoboxes-container {
max-width: 100%;
}
}