.chart-container { padding: 15px 0 !important; overflow-y: hidden; position: relative;/* display: flex; flex-direction: row; justify-content: center;*/ } .chart { height: 25vh; min-width: 825px; max-width: 1250px; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; padding: 0 15px; position: relative; } #java-version-chart { margin-bottom: 30px; } .chart-column-container { height: 100%; } #java-version-chart .chart-column-container { margin-right: 5px; } #ip-session-chart .chart-column-container { width: 2px; } .chart-left-labels { font-size: 0.75rem; font-family: var(--ui-font); color: var(--secondary-ui-text-color); position: absolute; right: calc(50% + 500px); height: 100%; display: flex; flex-direction: column; align-items: flex-end; } .chart-left-labels > span { position: relative; margin-right: 4px; transform: translateY(-0.375rem); } .chart-left-labels > span::after { content: " "; border-top: 1px solid var(--atom-mono-3); width: 1000px; display: inline-block; top: 0; position: absolute; margin-left: 4px; transform: translateY(0.375rem); opacity: 0.5; } .chart-column { background-color: var(--atom-base); } .chart-column-label { display: inline-block; font-size: 0.75em; width: 100%; text-align: center; word-wrap: normal; } .chart-column-data-label { display: inline-block; text-align: center; width: 100%; font-size: 0.75em; } .chart-column-spacer { position: relative; } .chart-column-spacer > .chart-column-data-label { position: absolute; bottom: 0; } .chart-caption { font-family: var(--ui-font); font-style: italic; font-size: 1rem; color: var(--secondary-ui-text-color); text-align: center; padding: 0 15px; } @media (max-width: 1250px) { .chart-column-label { transform: translate(5px, 5px) rotate(25deg); } } @media (max-width: 1150px) { #ip-session-chart-container { overflow-x: scroll; } #ip-session-chart { justify-content: left; } .chart-left-labels { position: initial; } } /* 825px = (50px + 5px) * 15 columns */ @media (max-width: 825px) { #java-version-chart-container { overflow-x: scroll; } #java-version-chart { justify-content: left; } } @media (max-width: 540px) { .chart-column-label { transform-origin: 0 50%; transform: translate(50%, -10px) rotate(90deg); } #java-version-chart { margin-bottom: 60px; } }