.slide-chart-container { width: 90%; min-width: 880px; height: 650px; margin: auto; padding-left: 5%; } @media all and (max-width: 959px) { .slide-chart-container { width: 100%; min-width: unset; height: 65vh; margin-top: 105px; margin-bottom: 35px; } .chart-select-group { display: inline-grid; width: 70%; text-align: center; margin-left: 10%; } .chart-select-group /deep/ button.mat-button-toggle-button { width: 100%; } } mat-button-toggle.mat-button-toggle-checked { background: #ffffff; } mat-button-toggle { color: #666666; background: #e7e7e7; } :host /deep/ .chart-legend { position: absolute; margin-top: -60px; margin-left: -220px; } :host /deep/ .chart-legend .legend-labels { width: 200px; } :host /deep/ .chart-legend .legend-label { float: left; padding-left: 14px; }