|
|
| (8 intermediate revisions by the same user not shown) |
| Line 39: |
Line 39: |
| vertical-align: middle; | | vertical-align: middle; |
| } | | } |
|
| |
| .vector-header-start { | | .vector-header-start { |
| display: flex; | | display: flex; |
| Line 98: |
Line 97: |
| .hover-table img:hover { | | .hover-table img:hover { |
| transform: scale(1.1); | | transform: scale(1.1); |
| | } |
| | |
| | /* Mobile Responsive adjustments */ |
| | @media (max-width: 768px) { |
| | .hover-table td { |
| | display: inline-block; |
| | width: 45%; |
| | box-sizing: border-box; |
| | text-align: center; |
| | vertical-align: top; |
| | padding: 10px; |
| | } |
| | .hover-table tr { |
| | display: block; |
| | } |
| } | | } |
|
| |
|
| Line 122: |
Line 136: |
| } | | } |
|
| |
|
| /* Name text under icons */
| |
| .hover-table td span { | | .hover-table td span { |
| | white-space: nowrap; |
| display: inline-block; | | display: inline-block; |
| max-width: 100%; | | max-width: 100%; |
| text-align: center;
| | font-size: 15px; /* or scale down just a bit */ |
| font-size: 15px; | |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| }
| |
| | |
| /* Mobile Responsive adjustments */
| |
| @media (max-width: 768px) {
| |
| .hover-table td span {
| |
| font-size: 11px;
| |
| white-space: normal; /* allow wrapping if needed */
| |
| word-break: break-word;
| |
| line-height: 1.2;
| |
| }
| |
| | |
| .hover-table img {
| |
| width: 80px;
| |
| height: 80px;
| |
| }
| |
| | |
| .hover-table td {
| |
| display: inline-block;
| |
| width: 50%; /* 2 columns per row */
| |
| box-sizing: border-box;
| |
| text-align: center;
| |
| vertical-align: top;
| |
| padding: 6px;
| |
| }
| |
| | |
| .hover-table tr {
| |
| display: block;
| |
| }
| |
| } | | } |
|
| |
|
| /* Hide template spacer on mobile */ | | /* Hide template spacer on mobile */ |
| @media screen and (max-width: 768px) { | | @media screen and (max-width: 768px) { |
| .desktop-only-spacer {
| | .desktop-only-spacer { |
| display: none !important;
| | display: none !important; |
| }
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .hover-table {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| }
| |
| | |
| .hover-table tr {
| |
| display: contents; /* Ensures <td> children are treated as flex items */
| |
| }
| |
| | |
| .hover-table td {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| width: 45%; /* Two columns per row */
| |
| padding: 10px;
| |
| box-sizing: border-box;
| |
| text-align: center;
| |
| }
| |
| | |
| .hover-table img {
| |
| width: 80px;
| |
| height: 80px;
| |
| }
| |
| | |
| .hover-table td span {
| |
| font-size: 11px;
| |
| white-space: normal;
| |
| word-break: break-word;
| |
| line-height: 1.2;
| |
| margin-top: 4px;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| /* Force entire table into flex grid layout */
| |
| .hover-table {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: space-evenly;
| |
| padding: 0;
| |
| border: none;
| |
| }
| |
| | |
| .hover-table tr {
| |
| display: contents; /* Prevent <tr> from enforcing row breaks */
| |
| }
| |
| | |
| .hover-table td {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: flex-start;
| |
| width: 45%;
| |
| padding: 10px;
| |
| box-sizing: border-box;
| |
| border: none;
| |
| }
| |
| | |
| .hover-table img {
| |
| width: 80px;
| |
| height: 80px;
| |
| }
| |
| | |
| .hover-table td span {
| |
| font-size: 11px;
| |
| white-space: normal;
| |
| word-break: break-word;
| |
| text-align: center;
| |
| line-height: 1.2;
| |
| margin-top: 4px;
| |
| } | | } |
| } | | } |
